Client Side Pagination in Gridview

As you know pagination is very important for any data control for eg Gridview if you have large amount of data. Server load on pagination is also a big concern.
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;

    }

Comments

Popular posts from this blog

CAML Query in SharePoint 2010

Calling REST APi from server side code - C#

All about SharePoint 2010 Content Type Hub

SharePoint Interview Questions and Answers

Calling ASP.Net WebMethod using jQuery AJAX