用AspNetPager控件最详细的分页实现方法（亲自实践）

2019-11-17 03:48:44

字体：大中小

来源：转载

供稿：网友

祝贺一下~好不容易把分页做出来了。之前都是用GridView自带的分页，版式难看不说，还极不优化，一次取出所有记录，然后进行假分页。
现在用aspNetPager控件做出的真分页，就好多了，不过还有改进的地方，SQL语句如果换成存储过程效率会更高。

首先在SqlHelper.cs（DAL层中的数据库助手类，用于写可以复用的基本增删查改方法）中加上以下代码：

Code
/**//// <summary>
        /// 获取分页数据
        /// </summary>
        /// <param name="sql">sql语句</param>
        /// <param name="currentPage">当前页</param>
        /// <param name="pagesize">每页显示数</param>
        /// <param name="recordcount"></param>
        /// <returns></returns>
        public static DataSet GetPage(string sql, int currentPage, int pagesize, out int recordcount)
        {
            openCon();
            sqlDs.Clear();

            sqlDa = new SqlDataAdapter(sql, sqlConn);
            int startRow = (currentPage - 1) * pagesize;
            sqlDa.Fill(sqlDs, startRow, pagesize, "table");
            recordcount = GetPageRecord(sql);
            closeCon();

return sqlDs;
}

        //返回总的记录数
        public static int GetPageRecord(string sql)
        {
            openCon();
            sql = Regex.Replace(sql, "order by.*", "");
            sql = "select count(*) from (" + sql + ") as temp";
            sqlCmd = new SqlCommand(sql, sqlConn);
            int recordcount = int.Parse(sqlCmd.ExecuteScalar().ToString());
            closeCon();

return recordcount;
}

然后在BLL层新建一个PageManager.cs的分页操作类，封装一下DAL层方法：

asp.net需分页的数据绑定处是这样的：

Code
<asp:Repeater ID="repNewsList" runat="server">
    <ItemTemplate>
        <tr>
            <td align="center"><a href="list.aspx?caid=<%# Eval("caId") %>"><%# Eval("name") %></a></td>
            <td align="center"><%# Eval("createTime") %></td>
        </tr>
    </ItemTemplate>
</asp:Repeater>

然后在绑定代码下方加上分页控件(当然这个可以随便放，怎么好看怎么放)：

Code

        <div style="text-align:center; height:50px; line-height:50px;">

            <webdiyer:AspNetPager ID="AspNetPager1" runat="server" AlwaysShow="True" UrlPaging="true"
                FirstPageText="首页" LastPageText="末页" NextPageText="下一页" NumericButtonCount="5"
                onpagechanged="AspNetPager1_PageChanged" PagingButtonSpacing="10px" NumericButtonTextFormatString="[{0}]"
                PRevPageText="上一页" SubmitButtonText="Go" TextAfterPageIndexBox="页"
                TextBeforePageIndexBox="转到" ShowCustomInfoSection="Left"
                CustomInfoHTML="目前是第%CurrentPageIndex%页 / 总共%PageCount%页">
            </webdiyer:AspNetPager>

        </div>

最后在aspx.cs中加上数据的分页绑定方法（这里的SQL语句要根据列表显示的需要进行调整）：

Code
/**//// <summary>
    /// 绑定带有分页的新闻列表
    /// </summary>
    public void BindRepeater()
    {
        int caid = int.Parse(Request.QueryString["caid"]);

        string Sql = "select * from news where caId=" + caid + " order by createTime desc";
        int CurrentPage = AspNetPager1.CurrentPageIndex;
        int PageSize = AspNetPager1.PageSize;
        int RecordCount;

DataSet ds = PageManager.GetPage(Sql, CurrentPage, PageSize, out RecordCount);
AspNetPager1.RecordCount = RecordCount;

AspNetPager1.CustomInfoHTML += " 共" + RecordCount + "条新闻</b>";

        repNewsList.DataSource = ds;
        repNewsList.DataBind();
    }

别忘了，在page_load调用一下：

protected void Page_Load(object sender, EventArgs e)
    {
        if (!Page.IsPostBack)
        {
            BindRepeater();
        }
    }

还有分页控件的PageChanged事件里也调用一下：

protected void AspNetPager1_PageChanged(object sender, EventArgs e)
    {
        BindRepeater();
    }

最后再补充一个非常漂亮的翻页样式，清爽超酷型~：

Code
<style>

    .anpager
    {}{
        font-size:12px;
    }
    .anpager .cpb
    {}{
        background:#1F3A87 none repeat scroll 0 0;
        border:1px solid #CCCCCC;
        color:#FFFFFF;
        font-weight:bold;
        margin:5px 4px 0 0;
        padding:4px 5px 0;
    }
    .anpager a
    {}{
        background:#FFFFFF none repeat scroll 0 0;
        border:1px solid #CCCCCC;
        color:#1F3A87;
        margin:5px 4px 0 0;
        padding:4px 5px 0;
        text-decoration:none
    }
    .anpager a:hover
    {}{
        background:#1F3A87 none repeat scroll 0 0;
        border:1px solid #1F3A87;
        color:#FFFFFF;
    }