Hi, I'm stuck figuring out how to implement jQuery DataTable into my GridView after many failed attempts. Here I'm trying to add jQuery DataTable like the one mentioned in the image below so that asynchronous searching, asynchronous pagination, and results will be displayed without the page needing to postback! below is the code I'm using:
Kindly help..
HTML ASPX Markup:
<head runat="server">
<title>Test Page</title>
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css"/>
<script type="text/javascript" src="//cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script type="text/javascript">
$(function () {
$('[id$=GridView1]').prepend($("<thead></thead>").append($('[id$=GridView1]').find("tr:first"))).DataTable({
"responsive": true,
"sPaginationType": "full_numbers"
});
});
</script>
<script type="text/javascript">
var prm = Sys.WebForms.PageRequestManager.getInstance();
if (prm != null) {
prm.add_endRequest(function (sender, e) {
if (sender._postBackSettings.panelsToUpdate != null) {
$('[id$=GridView1]').prepend($("<thead></thead>").append($('[id$=GridView1]').find("tr:first"))).DataTable({
"responsive": true,
"sPaginationType": "full_numbers"
});
}
});
};
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:GridView ID="GridView1" CssClass="table table-responsive table-hover table-bordered dataTable dataTables_paginate"
runat="server" AutoGenerateColumns="False" DataKeyNames="id" DataSourceID="SqlDataSource1">
<Columns>
<asp:BoundField DataField="id" HeaderText="id" InsertVisible="False" ReadOnly="True" SortExpression="id" />
<asp:BoundField DataField="uname" HeaderText="uname" SortExpression="uname" />
<asp:BoundField DataField="pword" HeaderText="pword" SortExpression="pword" />
<asp:BoundField DataField="email" HeaderText="email" SortExpression="email" />
<asp:BoundField DataField="lastlogindate" HeaderText="lastlogindate" SortExpression="lastlogindate" />
<asp:BoundField DataField="status" HeaderText="status" SortExpression="status" />
</Columns>
</asp:GridView>
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$ ConnectionStrings:stjosephconnect %>"
SelectCommand="SELECT * FROM [login]"></asp:SqlDataSource>
</form>
</body>
Here is the output I'm getting:
