Bind ASP.Net Repeater and display Bootstrap DataTable search result using jQuery in ASP.Net

Last Reply 26 days ago By dharmendr

Posted 27 days ago

Hi All,

With reference to below link i have implemented normal gridivew and Repeater control operation with Bootstrap datatable plugins.

Display Bootstrap DataTable search result in ASP.Net Repeater using jQuery in ASP.Net

I want to load grid details into the repeater control on page load also.

Is it possible ? Please advice

You are viewing reply posted by: dharmendr 26 days ago.
Posted 26 days ago

Hi Waghmare,

Check this example. Now please take its reference and correct your code.


For this example I have used of Northwind database that you can download using the link given below.

Download Northwind Database


<html xmlns="">
<head runat="server">
    <link type="text/css" rel="stylesheet" href="" />
    <link type="text/css" rel="stylesheet" href="" />
    <link type="text/css" rel="stylesheet" href="" />
    <script type="text/javascript" src=""></script>
    <script type="text/javascript" src=""></script>
    <script type="text/javascript" src=""></script>
    <script type="text/javascript" src=""></script>
    <script type="text/javascript" src=""></script>
    <script type="text/javascript">
        $(function () {
            var table = $('[id*=gvCustomers]').prepend($("<thead></thead>").append($(this).find("tr:first"))).DataTable({
                "responsive": false,
                "sPaginationType": "full_numbers",
                "bPaginate": true,
                "bSort": true,
                "iDisplayLength": 5,
                "stateSave": false,
                "stateDuration": 60 * 1
            var repeaterTBody;
            table.on('search.dt', function () {
                if (repeaterTBody == null) {
                    repeaterTBody = $("#dvCustomers table").eq(0).clone(true);
                if (table.rows({ filter: 'applied' }).data().length > 0) {
                    for (var i = 0; i < table.rows({ filter: 'applied' }).data().length; i++) {
                        $(".id", repeaterTBody).html(table.rows({ filter: 'applied' }).data()[i][0]);
                        $(".name", repeaterTBody).html(table.rows({ filter: 'applied' }).data()[i][1]);
                        $(".country", repeaterTBody).html(table.rows({ filter: 'applied' }).data()[i][2]);
                        $("#dvCustomers").append("<table>" + repeaterTBody.html().trim() + "</table>");
                        repeaterTBody = $("#dvCustomers table").eq(0).clone(true);
                } else {
                    var empty_row = repeaterTBody.clone(true);
                    $("td:first-child", empty_row).attr("colspan", $("td", repeaterTBody).length);
                    $("td:first-child", empty_row).attr("align", "center");
                    $("td:first-child", empty_row).html("No matching records found");
                    $("td", empty_row).not($("td:first-child", empty_row)).remove();
    <form id="form1" runat="server">
    <asp:GridView ID="gvCustomers" runat="server" AutoGenerateColumns="false" class="table table-striped"
            <asp:BoundField DataField="CustomerID" HeaderText="Customer ID" />
            <asp:BoundField DataField="ContactName" HeaderText="Name" />
            <asp:BoundField DataField="Country" HeaderText="Country" />
    <br />
    <div id="dvCustomers">
        <asp:Repeater ID="rptCustomers" runat="server">
                        <td><span class="id"><%# Eval("CustomerID")%></span></td>
                        <td><span class="name"><%# Eval("ContactName") %></span></td>
                        <td><span class="country"><%# Eval("Country") %></span></td>



using System.Configuration;
using System.Data;
using System.Data.SqlClient;


Imports System.Configuration
Imports System.Data
Imports System.Data.SqlClient



protected void Page_Load(object sender, EventArgs e)
    if (!this.IsPostBack)
        string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
        using (SqlConnection con = new SqlConnection(constr))
            using (SqlCommand cmd = new SqlCommand("SELECT TOP 7 CustomerID,ContactName,Country FROM Customers", con))
                using (SqlDataAdapter sda = new SqlDataAdapter(cmd))
                    cmd.CommandType = CommandType.Text;
                    DataTable dt = new DataTable();
                    gvCustomers.DataSource = dt;
                    rptCustomers.DataSource = dt;


Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
    If Not Me.IsPostBack Then
        Dim constr As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
        Using con As SqlConnection = New SqlConnection(constr)
            Using cmd As SqlCommand = New SqlCommand("SELECT TOP 7 CustomerID,ContactName,Country FROM Customers", con)
                Using sda As SqlDataAdapter = New SqlDataAdapter(cmd)
                    cmd.CommandType = CommandType.Text
                    Dim dt As DataTable = New DataTable()
                    gvCustomers.DataSource = dt
                    rptCustomers.DataSource = dt
                End Using
            End Using
        End Using
    End If
End Sub