Click here to Skip to main content
Click here to Skip to main content
Add your own
alternative version

Custom paging with ASP.NET GridView

, 26 Jun 2012 CPOL
Easy way to implement ASP.NET GridView paging .
<%@ 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>bravi Custom Paging</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js"></script>
    <link href="styles.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
        $(document).ready(function () {
            $('#A1').click(function () {
                $('#hdSize').val('10');
                Loadpage();
            });
            $('#A2').click(function () {
                $('#hdSize').val('15');
                Loadpage();
            });
        });
        function Loadpage() {
            try {
                //reload page using new page size
                var url = $(location).attr('href');
                var index = "Index=1";
                if (url.indexOf('Index') > 0) {
                    index = url.split('?')[1];
                    index = index.split('&')[0];
                }
                url = url.split('?')[0] + "?" + index + "&Size=" + $('#hdSize').val() + "";
                window.location.href = url;
            } catch (e) {
                alert(e);
            }
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <input type="hidden" runat="server" id="hdSize" />
    <div>
        <asp:GridView ID="gvPaging" runat="server" AutoGenerateColumns="false" GridLines="None">
            <Columns>
                <asp:TemplateField>
                    <ItemTemplate>
                        <table>
                            <tr>
                                <td class="text">
                                    Customer ID:
                                </td>
                                <td align="left" colspan="5">
                                    <%# Eval("CustomerID")%>
                                </td>
                            </tr>
                            <tr>
                                <td align="left" colspan="4" class="text">
                                    Employee ID:
                                </td>
                                <td>
                                    <%# Eval("EmployeeID") %>
                                </td>
                                <td align="left" colspan="4" class="text">
                                    Ship Name:
                                </td>
                                <td>
                                    <%# Eval("ShipName")%>
                                </td>
                                <td align="left" colspan="4" class="text">
                                    Ship Country:
                                </td>
                                <td>
                                    <%# Eval("ShipCountry")%>
                                </td>
                            </tr>
                            <tr>
                                <td colspan="6">
                                    <hr />
                                </td>
                            </tr>
                        </table>
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>
        <div class="pager fl">
            <asp:Label runat="server" ID="lblpre"></asp:Label>
            <asp:Label runat="server" ID="lblIst" Visible="false"></asp:Label>
            <asp:Label runat="server" ID="spDot1" CssClass="page-numbers prev" Visible="false"
                Text="..."></asp:Label>
            <asp:PlaceHolder ID="pl" runat="server"></asp:PlaceHolder>
            <asp:Label runat="server" ID="spDot2" Visible="false" CssClass="page-numbers prev"
                Text="..."></asp:Label>
            <asp:Label runat="server" ID="lblLast" Visible="false"></asp:Label>
            <asp:Label runat="server" ID="lblnext"></asp:Label>
        </div>
        <div class="pager f2">
            <a id="A1" href="javascript:void(0);" runat="server" class="page-numbers">10</a>&nbsp;
            <a href="javascript:void(0);" id="A2" runat="server" class="page-numbers">15</a><span
                class="page-numbers desc">per page</span>
        </div>
    </div>
    </form>
</body>
</html>

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

tanweer
Software Developer LIFELONG Pakistan, Islamabad
Pakistan Pakistan
Software Engineer at LIFELONG Pakistan,
 
http://tanweerbravi.blogspot.com
Follow on   Google+

| Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.141216.1 | Last Updated 26 Jun 2012
Article Copyright 2012 by tanweer
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid