用AspNetPager控件最詳細(xì)的分頁實現(xiàn)方法（親自實踐）

2019-11-17 03:48:44

字體：大中小

供稿：網(wǎng)友

祝賀一下~好不容易把分頁做出來了。之前都是用GridView自帶的分頁，版式難看不說，還極不優(yōu)化，一次取出所有記錄，然后進行假分頁。
現(xiàn)在用aspNetPager控件做出的真分頁，就好多了，不過還有改進的地方，SQL語句如果換成存儲過程效率會更高。

首先在SqlHelper.cs（DAL層中的數(shù)據(jù)庫助手類，用于寫可以復(fù)用的基本增刪查改方法）中加上以下代碼：

Code
/**//// <summary>
        /// 獲取分頁數(shù)據(jù)
        /// </summary>
        /// <param name="sql">sql語句</param>
        /// <param name="currentPage">當(dāng)前頁</param>
        /// <param name="pagesize">每頁顯示數(shù)</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;
}

        //返回總的記錄數(shù)
        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需分頁的數(shù)據(jù)綁定處是這樣的：

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>

然后在綁定代碼下方加上分頁控件(當(dāng)然這個可以隨便放，怎么好看怎么放)：

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}]"
                                TextBeforePageIndexBox="轉(zhuǎn)到" ShowCustomInfoSection="Left"
                CustomInfoHTML="目前是第%CurrentPageIndex%頁 / 總共%PageCount%頁">
            </webdiyer:AspNetPager>

        </div>

最后在aspx.cs中加上數(shù)據(jù)的分頁綁定方法（這里的SQL語句要根據(jù)列表顯示的需要進行調(diào)整）：

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調(diào)用一下：

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

還有分頁控件的PageChanged事件里也調(diào)用一下：

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