該分頁控制項的顯示邏輯:

1 當前頁面反色突出顯示,鏈接不可點擊

2 第一頁時首頁鏈接不可點擊

3 最後一頁時尾頁鏈接不可點擊

4 當前頁面左右各顯示頁碼可以設置調節,如果左右一樣則居中

5 當左邊頁碼不足時,右側補充

6 當右側頁面不足時左側補充

7 總顯示頁碼數為左側+右側+1(當前)

組成部分:

1 PageModel 便於向組件傳遞參數

public class PageModel
    {
        /// <summary>
        /// 數據總條數
        /// </summary>
        public int DataCount { get; set; }
        /// <summary>
        /// 當前頁碼
        /// </summary>
        public int Page { get; set; }
        /// <summary>
        /// 每頁條數
        /// </summary>
        public int PageSize { get; set; }
        /// <summary>
        /// 當前頁碼左邊顯示頁數
        /// </summary>
        public int NumsOfLeft { get; set; }
        /// <summary>
        /// 當前頁碼右邊顯示頁數
        /// </summary>
        public int NumsOfRight { get; set; }
        /// <summary>
        /// 每頁允許顯示的最大條數
        /// 如果PageSize大於MaxPage則以MaxPage為準
        /// </summary>
        public int MaxPage { get; set; }
        /// <summary>
        /// 頁面前面的URL
        /// 比如URL為http://www.chengchenxu.com/1 
        /// 1為頁碼,則該屬性應該設置為:
        /// http://www.chengchenxu/
        /// </summary>
        public string Url { get; set; }
 
        public PageModel()
        {
            //設置的預設值
            this.PageSize = 10;
            this.NumsOfLeft = 4;
            this.NumsOfRight = 4;
            this.MaxPage = 30;
        }

2 分部視圖: 這是一個強類型View,最上面的要對應到你的項目的命名空間中.

@model ChengChenXu.com.PageModel.Models.PageModel
 
<ul class="pagination">
    @{
        //頁碼邏輯運算
        double d = (double)Model.DataCount / Model.PageSize;
        int pageNum = (int)Math.Ceiling(d);
        Model.Page = Model.Page < 1 ? 1 : Model.Page;
        Model.Page = Model.Page > pageNum ? pageNum : Model.Page;
        Model.PageSize = Model.PageSize > Model.MaxPage ? Model.MaxPage : Model.PageSize;
        int startNum, endNum;
        if (Model.Page > Model.NumsOfLeft)
        {
            endNum = Model.Page + Model.NumsOfRight;
        }
        else
        {
            endNum = Model.Page + Model.NumsOfRight + (Model.NumsOfLeft - Model.Page + 1);
        }
        if (pageNum - Model.Page >= Model.NumsOfRight)
        {
            startNum = Model.Page - Model.NumsOfLeft;
        }
        else
        {
            startNum = Model.Page - Model.NumsOfLeft - (Model.NumsOfRight - (pageNum - Model.Page));
        }
        startNum = startNum < 1 ? 1 : startNum;
        endNum = endNum > pageNum ? pageNum : endNum;
        //END 頁碼邏輯運算
 
        //開始顯示頁碼
         
        //顯示首頁
        if (pageNum == 1 || Model.Page == 1)
        {
            <li class="disabled"><a href="#" onclick="return false;">&laquo;</a></li>
        }
        else
        {
            <li><a href="@Model.Url">&laquo;</a></li>
        }
        //END 顯示首頁
 
        //顯示頁碼
        for (int i = startNum; i <= endNum; i++)
        {
            if (i == Model.Page)
            {
                <li class="active"><a href="#" onclick="return false;">@i</a></li>
            }
            else
            {
                <li><a href="@Model.Url@i">@i</a></li>
            }
 
        }
        //END 顯示頁碼
 
        //顯示尾頁
        if (pageNum == 1 || Model.Page == pageNum)
        {
            <li class="disabled"><a href="#" onclick="return false;">&raquo;</a></li>
        }
        else
        {
            <li><a href="@Model.Url@pageNum">&raquo;</a></li>
        }
        //END 顯示尾頁
    }
</ul>

使用方法:

1 在需要使用的地方添加以下代碼:

第一個參數為分部View的文件名,(要放到Shared文件夾中)

第二個參數為頁面使用ViewBag傳進來的PageModel對象 註意命名空間和ViewBag的動態標簽

@Html.Partial("PagePartial", ViewBag.PageModel as ChengChenXu.com.PageModel.Models.PageModel)

2 在Controller中創建PageModel對象並使用ViewBag傳遞

　　　　public ActionResult Index(int id=1,int pagesize=10)
        {
            //模擬200條數據
            List<string> list = new List<string>();
            for (int i = 1; i <= 200; i++)
            {
                list.Add("第"+i+"條數據");
            }
 
            ViewBag.List = list;
 
 
            //創建PageModel對象
            Models.PageModel pm = new Models.PageModel();
            pm.DataCount = list.Count;//數據總條數
            pm.Page = id;//當前頁碼
            pm.PageSize = pagesize;//每頁數量
            pm.Url = "/home/index/"; //URL
 
            ViewBag.PageModel = pm; //傳遞PageModel
 
 
            return View();
        }

生成代碼

樣式表請自己設計 DEMO中直接使用Bootstrap框架分頁樣式.

　　　　　　<ul class="pagination">
            <li class="disabled"><a href="#" onclick="return false;">&laquo;</a></li>
                <li class="active"><a href="#" onclick="return false;">1</a></li>
                <li><a href="/home/index/2">2</a></li>
                <li><a href="/home/index/3">3</a></li>
                <li><a href="/home/index/4">4</a></li>
                <li><a href="/home/index/5">5</a></li>
                <li><a href="/home/index/6">6</a></li>
                <li><a href="/home/index/7">7</a></li>
                <li><a href="/home/index/8">8</a></li>
                <li><a href="/home/index/9">9</a></li>
            <li><a href="/home/index/20">&raquo;</a></li>
          </ul>

源碼和DEMO下載:

ChengChenXu.com.PageModel.rar

本文為博主原創,轉載請保留出處:
http://chengchenxu.com/Article/22/mvc-fenye