Monday, 30 November 2015

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;

    }

No comments:

Post a Comment