bind gridview using jquery

GridView Bind Using Jquery

First See This asp.net webservice call in jquery
DOWNLOAD

function GetEmployee() {
     var pageUrl = '<%=ResolveUrl("~/WebService/EmployeeService.asmx")%>'
     $.ajax({
         type: "POST",
         url: pageUrl + "/GetEmployeeDetails",
         data: '{}',
         contentType: "application/json; charset=utf-8",
         dataType: "json",
         success: OnSuccessCall,
         error: OnErrorCall
     });
 }

 function OnSuccessCall(response) {
     $('#<%= grdView.ClientID %>').empty();
     var table = "<table id=tblResult><thead><tr> <th>Name</th> <th>Salary</th>  </tr></thead><tbody>";
     for (var i = 0; i < response.d.length; i++) {
         var row = "<tr>";
         row += "<td>" + response.d[i].FirstName + "</td>";
         row += "<td>" + response.d[i].Salary + "</td>";
         row += "</tr>";
         table += row;
     }

     table += "</tbody></table>";
     $('#<%= grdView.ClientID %>').append(table);
 }

 function OnErrorCall(response) {
     alert(response.status + " " + response.statusText);
 }

<script src="Scripts/jquery-1.7.2.min.js" type="text/javascript">
</script>
 <asp:button id="btnGetData" onclientclick="GetEmployee();return false;" runat="server" text="Get Data">
            <asp:gridview id="grdView" runat="server" showheaderwhenempty="True" visible="true">
            </asp:gridview>
</asp:button>

protected void Page_Load(object sender, EventArgs e)
{
    DataTable dt = new DataTable();
    dt.Columns.AddRange(new DataColumn[] { new DataColumn("Name"), new DataColumn("Salary") });
    grdView.DataSource = dt;
    grdView.DataBind();
}