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

Last Reply 28 days ago By dharmendr

Posted 28 days ago

Hi All,

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

Apply Bootstrap DataTable Plugin to GridView for searching paging sorting using jQuery in ASP.Net

I want to display search textbox result in gridview and repeater control at a time.

While clicked on search textbox need to display result in gridview and repeator control.

Please advice or suggest

You are viewing reply posted by: dharmendr 28 days ago.
Posted 28 days ago Modified on 27 days ago

Hi Amol111,

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": 10,
                "stateSave": false,
                "stateDuration": 60 * 1
            });
            table.on('search.dt', function () {
                var repeaterTable = $("#dvCustomers table tbody").eq(0).clone(true);
                $("#dvCustomers table").empty();
                if (table.rows({ filter: 'applied' }).data().length > 0) {
                    for (var i = 0; i < table.rows({ filter: 'applied' }).data().length; i++) {
                        $(".id", repeaterTable).html(table.rows({ filter: 'applied' }).data()[i][0]);
                        $(".name", repeaterTable).html(table.rows({ filter: 'applied' }).data()[i][1]);
                        $(".country", repeaterTable).html(table.rows({ filter: 'applied' }).data()[i][2]);
                        $("#dvCustomers table").append(repeaterTable);
                        repeaterTable = $("#dvCustomers table tbody").eq(0).clone(true);
                    }
                } else {
                    var empty_row = repeaterTable.clone(true);
                    $("td:first-child", empty_row).attr("colspan", $("td", repeaterTable).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 table").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>

Code

C#

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

public partial class _Default : System.Web.UI.Page
{
    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 15 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();
                        DataTable dt1 = dt.Clone();
                        dt1.Rows.Add();
                        rptCustomers.DataSource = dt1;
                        rptCustomers.DataBind();
                    }
                }
            }
        }
    }
}

VB.Net

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

Partial Class Default
    Inherits System.Web.UI.Page
    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 15 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()
                        Dim dt1 As DataTable = dt.Clone()
                        dt1.Rows.Add()
                        rptCustomers.DataSource = dt1
                        rptCustomers.DataBind()
                    End Using
                End Using
            End Using
        End If
    End Sub
End Class

Screenshot