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
