Hi Waghmare,
Refer the below code. You can simply need top design the table inside the repeater and bind the repeater with database like below and then use the javascript code fro sorting paging like below example.
HTML
<div>
<asp:Repeater ID="rptCustomers" runat="server">
<HeaderTemplate>
<table id="example" class="ui celled table nowrap" cellspacing="0" width="100%">
<thead>
<tr>
<th>
Customer ID
</th>
<th>
Contact Name
</th>
<th>
Contact Title
</th>
</tr>
</thead>
<tbody>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td>
<asp:Label ID="lblFirstname" runat="server" Text='<%# Eval("CustomerID") %>' />
</td>
<td>
<asp:Label ID="lblLastname" runat="server" Text='<%# Eval("ContactName") %>' />
</td>
<td>
<asp:Label ID="lblEmail" runat="server" Text='<%# Eval("ContactTitle") %>' />
</td>
</tr>
</ItemTemplate>
<FooterTemplate>
</tbody> </table>
</FooterTemplate>
</asp:Repeater>
</div>
<div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.12/js/dataTables.semanticui.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/responsive/2.1.0/js/dataTables.responsive.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/responsive/2.1.0/js/responsive.semanticui.min.js"></script>
<script type="text/javascript">
$(function () {
$('#example').DataTable({
responsive: {
details: {
display: $.fn.dataTable.Responsive.display.modal({
header: function (row) {
var data = row.data();
return 'Details for ' + data[0] + ' ' + data[1];
}
}),
renderer: $.fn.dataTable.Responsive.renderer.tableAll({
tableClass: 'ui table'
})
}
}
});
});
</script>
</div>
Code
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 CustomerID,ContactName,ContactTitle FROM Customers", con))
{
using (SqlDataAdapter sda = new SqlDataAdapter(cmd))
{
cmd.CommandType = CommandType.Text;
DataTable dt = new DataTable();
sda.Fill(dt);
rptCustomers.DataSource = dt;
rptCustomers.DataBind();
}
}
}
}
}