How to data bind gridview(bootsrap Datatable) using jquery

Question

Hi,

How to data bind gridview bootsrap Datatable using jquery in asp.net master page then below code wise but data bind multiple display this page then Searching,Sorting,Paging also not working so please helpme how tosolve this issue

<%@ Page Title="" Language="C#" MasterPageFile="~/Employee/FinalMenu_Master.master" AutoEventWireup="true"
CodeFile="DW_Tasks.aspx.cs" Inherits="Employee_DW_Tasks" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
<link type="text/css" href="Design/css/dataTables.bootstrap.min.css" rel="stylesheet" />
<link type="text/css" href="Design/css/responsive.bootstrap.min.css" rel="stylesheet" />
<script type="text/jscript" src="Design/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="Design/js/dataTables.bootstrap.min.js"></script>
<script type="text/javascript" src="Design/js/dataTables.responsive.min.js"></script>
<script type="text/javascript" src="Scripts/jquery.min.js"></script>
<link href="Design/bootstrap-3.3.7-dist/css/bootstrap.css" rel="stylesheet" />
<script type="text/javascript">
$(function () {
$('[id*=gvCustomers]').prepend($("<thead></thead>").append($(this).find("tr:first"))).DataTable({
"responsive": true,
"sPaginationType": "full_numbers"
});
});
</script>
<script type="text/javascript">
$(function () {
GetCustomers();
});
function GetCustomers() {
// debugger;
$.ajax({
type: "POST",
url: "DW_Tasks.aspx/GetCustomers",
data: '{}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: OnSuccess,
failure: function (response) {
alert(response.d);
},
error: function (response) {
alert(response.d);
}
});
}
function OnSuccess(response) {
// debugger;
var xmlDoc = $.parseXML(response.d);
var xml = $(xmlDoc);
var customers = xml.find("Customers");
var row = $("[id*=gvCustomers] tr:last-child").clone(true);
$("[id*=gvCustomers] tr").not($("[id*=gvCustomers] tr:first-child")).remove();
$.each(customers, function () {
// debugger;
var customer = $(this);
$("td", row).eq(0).html($(this).find("CustomerID").text());
$("td", row).eq(1).html($(this).find("ContactName").text());
$("td", row).eq(2).html($(this).find("City").text());
$("[id*=gvCustomers]").append(row);
row = $("[id*=gvCustomers] tr:last-child").clone(true);
});
};
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
<asp:GridView ID="gvCustomers" runat="server" AutoGenerateColumns="false" >
<Columns>
<asp:BoundField ItemStyle-Width="150px" DataField="CustomerID" HeaderText="CustomerID" />
<asp:BoundField ItemStyle-Width="150px" DataField="ContactName" HeaderText="Contact Name" />
<asp:BoundField ItemStyle-Width="150px" DataField="City" HeaderText="City" />
</Columns>
</asp:GridView>
</asp:Content>

private void BindDummyRow()
{
DataTable dummy = new DataTable();
dummy.Columns.Add("CustomerID");
dummy.Columns.Add("ContactName");
dummy.Columns.Add("City");
dummy.Rows.Add();
gvCustomers.DataSource = dummy;
gvCustomers.DataBind();
}
[WebMethod]
public static string GetCustomers()
{
DataTable dt = new DataTable();
dt.TableName = "Customers";
dt.Columns.Add("CustomerID", typeof(string));
dt.Columns.Add("ContactName", typeof(string));
dt.Columns.Add("City", typeof(string));
DataRow dr1 = dt.NewRow();
dr1["CustomerID"] = 1;
dr1["ContactName"] = "Customer1";
dr1["City"] = "City1";
dt.Rows.Add(dr1);
DataRow dr2 = dt.NewRow();
dr2["CustomerID"] = 2;
dr2["ContactName"] = "Customer2";
dr2["City"] = "City2";
dt.Rows.Add(dr2);
DataRow dr3 = dt.NewRow();
dr3["CustomerID"] = 3;
dr3["ContactName"] = "Customer3";
dr3["City"] = "City3";
dt.Rows.Add(dr3);
DataRow dr4 = dt.NewRow();
dr4["CustomerID"] = 4;
dr4["ContactName"] = "Customer4";
dr4["City"] = "City4";
dt.Rows.Add(dr4);
DataRow dr5 = dt.NewRow();
dr5["CustomerID"] = 5;
dr5["ContactName"] = "Customer5";
dr5["City"] = "City5";
dt.Rows.Add(dr5);
DataSet ds = new DataSet();
ds.Tables.Add(dt);
return ds.GetXml();
}