Below is the code for pagination in gridview using client side. It means no page load/ server post back operation will be performed.
To implement this client side pagination, Table Pagination Plugin is used.
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head runat=”server”>
<title>Gridview Paging in Client Side</title>
<script src=”jquery-1.3.2.min.js” type=”text/javascript”></script>
<script src=”jquery.tablePagination.0.1.js” type=”text/javascript”></script>
<script type =”text/javascript” >
$(document).ready(
function() {
$(‘table’).tablePagination({});
});
</script>
</head>
<body>
<form id=”form1″ runat=”server”>
<div style =”width : 300px;”>
<asp:GridView ID=”GridView1″ runat=”server” AutoGenerateColumns=”False”
DataSourceID=”SqlDataSource1″ Width=”424px”
onprerender=”GridView1_PreRender” EnableModelValidation=”True” >
<Columns>
<asp:BoundField DataField=”postid” HeaderText=”Post ID” SortExpression=”id” />
<asp:BoundField DataField=”post” HeaderText=”Post Title” SortExpression=”name” />
</Columns>
</asp:GridView>
<asp:SqlDataSource ID=”SqlDataSource1″ runat=”server”
ConnectionString=”<%$ ConnectionStrings:ConStr %>”
SelectCommand=”SELECT [postid], [post],[posted_by] FROM [Posts]”></asp:SqlDataSource>
<br />
<br />
</div>
</form>
</body>
</html>
C# Code:
protected void GridView1_PreRender(object sender, EventArgs e)
{
GridView1.UseAccessibleHeader = false;
GridView1.HeaderRow.TableSection = TableRowSection.TableHeader;
}
