Display Bootstrap DataTable search result in ASP.Net Repeater 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 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

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