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

Last Reply 4 months ago By dharmendr

Posted 4 months 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 4 months ago.
Posted 4 months 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