Tuesday, December 11, 2012

asp.net gridview pagination Client Side using jquery in asp.net and C#

Here i will show U how to implement Pagination in asp.net gridview in client side.....




ASPX Page

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Gridview Pagination</title>
    
    <link href="StyleSheet.css" rel="stylesheet" type="text/css" />
    <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() {
         $('[id$=GridView1]').tablePagination({});
     });
    </script>
 
</head>
<body>
    <form id="form1" runat="server">
    <div style="width557px;">
        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" CellPadding="4"
            DataSourceID="SqlDataSource1" Width="555px" 
            OnPreRender="GridView1_PreRender" ForeColor="#333333" GridLines="None">
            <RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
            <Columns>
                <asp:BoundField DataField="id" HeaderText="id" SortExpression="id" />
                <asp:BoundField DataField="engine" HeaderText="engine" SortExpression="engine" />
                <asp:BoundField DataField="browser" HeaderText="browser" SortExpression="browser" />
                <asp:BoundField DataField="platform" HeaderText="platform" SortExpression="platform" />
                <asp:BoundField DataField="version" HeaderText="version" SortExpression="version" />
                <asp:BoundField DataField="grade" HeaderText="Grade" SortExpression="grade" />                
            </Columns>
            <FooterStyle BackColor="#5D7B9D" ForeColor="White" Font-Bold="True" />
            <PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
            <SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
            <HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
            <EditRowStyle BackColor="#999999" />
            <AlternatingRowStyle BackColor="White" ForeColor="#284775" />
        </asp:GridView>
        <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:demoConnectionString %>"
            SelectCommand="SELECT [id], [engine],[browser],[platform],[version],[grade] FROM [ajax]">
        </asp:SqlDataSource>        
    </div>
    </form>
</body>
</html> 
 

Code Behind :

 
    /* This event is important because there are No Header and footer in gridview */
    protected void GridView1_PreRender(object sender, EventArgs e)
    {
        GridView1.UseAccessibleHeader = false;
        GridView1.HeaderRow.TableSection = TableRowSection.TableHeader;
    } 


Download From HERE


No comments:

Post a Comment