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

Last Reply 27 days ago By dharmendr

Posted 28 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

Posted 27 days ago

Hi Waghmare,

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

Database

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

Download Northwind Database

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link type="text/css" rel="stylesheet" href="https://cdn.datatables.net/1.10.9/css/dataTables.bootstrap.min.css" />
    <link type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
    <link type="text/css" rel="stylesheet" href="https://cdn.datatables.net/responsive/1.0.7/css/responsive.bootstrap.min.css" />
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/responsive/1.0.7/js/dataTables.responsive.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/1.10.9/js/dataTables.bootstrap.min.js"></script>
    <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></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);
                }
                $("#dvCustomers").empty();
                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();
                    $("#dvCustomers").append(empty_row);
                }
            })
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <asp:GridView ID="gvCustomers" runat="server" AutoGenerateColumns="false" class="table table-striped"
        Width="100%">
        <Columns>
            <asp:BoundField DataField="CustomerID" HeaderText="Customer ID" />
            <asp:BoundField DataField="ContactName" HeaderText="Name" />
            <asp:BoundField DataField="Country" HeaderText="Country" />
        </Columns>
    </asp:GridView>
    <br />
    <div id="dvCustomers">
        <asp:Repeater ID="rptCustomers" runat="server">
            <ItemTemplate>
                <table>
                    <tr>
                        <td><span class="id"><%# Eval("CustomerID")%></span></td>
                        <td><span class="name"><%# Eval("ContactName") %></span></td>
                        <td><span class="country"><%# Eval("Country") %></span></td>
                    </tr>
            </ItemTemplate>
        </asp:Repeater>
    </div>
    </form>
</body>
</html>

Namespaces

C#

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

VB.Net

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

Code

C#

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();
                    sda.Fill(dt);
                    gvCustomers.DataSource = dt;
                    gvCustomers.DataBind();
                    rptCustomers.DataSource = dt;
                    rptCustomers.DataBind();
                }
            }
        }
    }
}

VB.Net

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()
                    sda.Fill(dt)
                    gvCustomers.DataSource = dt
                    gvCustomers.DataBind()
                    rptCustomers.DataSource = dt
                    rptCustomers.DataBind()
                End Using
            End Using
        End Using
    End If
End Sub

Screenshot