（function（）{

（'[id * = gvCustomers]'）。prepend（

（< thead>< / THEAD&GT。;）附加（

Hi,

Database Data Bind in gridview but dispaly the data in multiple times with Searching Sorting,Paging not working below code wise
how to solve 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>

Code:

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();
   }

What I have tried:

I want Bind Data to Gridview with Jquery and Bootsrap Datatable Search,Sorting,Paging all are this Above code wise not working.

(function () {

('[id*=gvCustomers]').prepend(

("<thead></thead>").append(