分页通用编程 Gridview ADO.NET SQL Server 2008 .NET4 高级 SQL Server SQL Javascript .NET ASP.NET C#

使用 ASP.NET GridView 的自定义分页

<b>tanweer</b>

4.69/5 (25投票s)

2012年6月26日

CPOL

2分钟阅读

195898

4388

实现 ASP.NET GridView 分页的简单方法。

下载源代码 - 4.2 KB

引言

一个可扩展的 Web 应用程序使用分页技术来加载大量数据。分页使 Web 应用程序能够有效地仅从数据库中检索其需要的特定行，并避免必须将数十、数百甚至数千个结果拉回到 Web 服务器。今天我将演示如何在 asp.net 应用程序中实现自定义分页。这是一个非常重要的方法，用于在应用程序中使用分页技术，这些应用程序需要从数据库加载大量数据。使用一个好的分页技术可以为您的应用程序带来显着的性能提升（在延迟和吞吐量方面），并减少数据库的负载。

背景

GridView 具有内置的分页支持，但当处理大量数据时，它非常繁重且成本高昂。开发自定义分页的想法来自 stackoverflow 网站，该网站使用自定义分页技术将大量数据非常平滑地分成许多页面。

使用代码

首先，这里的最大魔力是 SQL 查询，它使处理要从数据库中提取的数据量变得容易。我使用了NorthWind数据库的 Orders表，该表有 800 多条记录。这里，Index和Size是两个来自querystring的integer变量。

Index 是当前页码
Size 是要在一页上显示的记录数

select * from (SELECT  ROW_NUMBER() OVER (ORDER BY CustomerID asc) as row,* FROM Orders) 
  tblTemp WHERE row between (" + index + " - 1) * " + size + 
  " + 1 and " + index + "*" + size + " ";
            SQL += " select COUNT(*) from Orders

第一次加载页面时，它没有querystring值，因此默认的Index为 1，Size为 10。稍后您可以更改页面大小，可以选择每页 10 条记录和每页 15 条记录。我试图在代码中解释所有必要的要点。

void BindGrid(int size, int index)
{
    //page url--get from Web.config file--------change it as your page URL
    string url = ConfigurationManager.AppSettings["URL"].ToString();
    //string templates for links
    string link = "<a  href='" + url + 
      "?Index=##Index##&Size=##Size##'><span class='page-numbers'>##Text##</span></a>";
    string link_pre = "<a href='" + url + 
      "?Index=##Index##&Size=##Size##'><span class='page-numbers prev'>##Text##</span></a>";
    string link_next = "<a href='" + url + 
      "?Index=##Index##&Size=##Size##'><span class='page-numbers next'>##Text##</span></a>";
    try
    {
        //the connectionstring from Web.config file--------change it as per your database settings
        String ConnStr = ConfigurationManager.ConnectionStrings["myConnection"].ToString();
        //the sql query with paging logics
        //here table name is "Orders" change this name as your requirement.
        //"CustomerID" is the column by which you can sort the records, change it as per your requirement
        String SQL = @"select * from (SELECT  ROW_NUMBER() OVER (ORDER BY CustomerID asc) as row,* FROM Orders) tblTemp
                    WHERE row between (" + index + " - 1) * " + size + 
                    " + 1 and " + index + "*" + size + " ";
        SQL += " select COUNT(*) from Orders";
        //fetching data from database suing SqlDataAdapter Fill method to bind the Gridview
        SqlDataAdapter ad = new SqlDataAdapter(SQL, ConnStr);
        DataSet ds = new DataSet();
        ad.Fill(ds);
        //bind the grid with the ist data table---------remember that this dataset consist of two data tables
        this.gvPaging.DataSource = ds.Tables[0];
        this.gvPaging.DataBind();
        ////////get the n number of record///////////
        Double n = Convert.ToDouble(Convert.ToInt32(ds.Tables[1].Rows[0][0]) / size);
        /////////setting page numbers with links
        if (index != 1)
            lblpre.Text = link_pre.Replace("##Size##", size.ToString()).Replace(
              "##Index##", (index - 1).ToString()).Replace("##Text##", "prev");
        else
            lblpre.Text = "<span class='page-numbers prev'>prev</span>";
        if (index != Convert.ToInt32(n))
            lblnext.Text = link_next.Replace("##Size##", size.ToString()).Replace(
              "##Index##", (index + 1).ToString()).Replace("##Text##", "next");
        else
            lblnext.Text = "<span class='page-numbers next'>next</span>";
        //generate dynamic paging 
        int start;
        if (index <= 5) start = 1;
        else start = index - 4;
        for (int i = start; i < start + 7; i++)
        {
            if (i > n) continue;
            //create dynamic HyperLinks 
            HyperLink lnk = new HyperLink();

            lnk.ID = "lnk_" + i.ToString();
            if (i == index)//current page
            {
                lnk.CssClass = "page-numbers current";
                lnk.Text = i.ToString();
            }
            else
            {
                lnk.Text = i.ToString();
                lnk.CssClass = "page-numbers";
                lnk.NavigateUrl = url + "?Index=" + i + "&Size=" + size + "";
            }
            //add links to page
            this.pl.Controls.Add(lnk);
        }
        //------------------------------------------------------------------
        //set up the ist page and the last page
        if (n > 7)
        {
            if (index <= Convert.ToInt32(n / 2))
            {
                lblLast.Visible = true;
                lblIst.Visible = false;
                lblLast.Text = link.Replace("##Index##", n.ToString()).Replace(
                  "##Size##", size.ToString()).Replace("##Text##", n.ToString());
                spDot2.Visible = true;
                spDot1.Visible = false;
            }
            else
            {
                lblLast.Visible = false;
                lblIst.Visible = true;
                lblIst.Text = link.Replace("##Index##", (n - n + 1).ToString()).Replace(
                  "##Size##", size.ToString()).Replace("##Text##", (n - n + 1).ToString());
                spDot2.Visible = false;
                spDot1.Visible = true;
            }
        }
    }
    catch (Exception ee)
    {
        //catch the exception
    }
}

在上述方法中，您必须更改配置设置，例如 Connectionstring 和页面 url ，这些可以在 web.config 文件中编辑。

在 aspx 页面上有六个标签

上一页链接
第一页链接
第一页链接前的点
下一页链接
最后一页链接
第一页链接前的点

以及用于其他页码的PlaceHolder

<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>

超链接是动态创建的，设置它们的链接和css，并在页面加载时添加到占位符中。

另一点是替换 SQL 查询中的表名和order by语句中的列名。

要更改页面大小，页面右侧有两个选项（html 锚标记）。您可以设置每页 10 条记录或每页 15 条记录。使用JQuery，我捕获了这两个 html 锚的点击事件，并将当前设置的页面大小设置在HiddenField中，并通过在 querystring 中传递Index和Size来重新加载当前页面。

<input type="hidden" runat="server" id="hdSize" />

jQuery 代码

<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>

CSS: CSS 在此分页中起着重要作用。尽管所有工作都完成了，但如果没有给出良好的 css 效果，这些看起来都很差。

td
{
    color: #55ff00;
}
.text
{
    color: #74aacc;
}

.fl
{
    float: left;
}
.f2
{
    float: right;
    padding-right: 200px;
}
.pager
{
    margin-top: 20px;
    margin-bottom: 20px;
}
.page-numbers
{
    font-family: 'Helvetica Neue' ,Helvetica,Arial,sans-serif;
    border: 1px solid #CCC;
    color: #808185;
    display: block;
    float: left;
    font-size: 130%;
    margin-right: 3px;
    padding: 4px 4px 3px;
    text-decoration: none;
}
.page-numbers.current
{
    background-color: #808185;
    border: 1px solid #808185;
    color: white;
    font-weight: bold;
}
.page-numbers.next, .page-numbers.prev
{
    border: 1px solid white;
}
.page-numbers.desc
{
    border: none;
    margin-bottom: 10px;
}

屏幕截图

历史

开发这篇文章花了一个星期的时间，它的发布日期是 2012 年 6 月 26 日