Html列表分頁算法

 

public class PageHelper
    {
        /// <summary>
        /// 標簽
        /// </summary>
        public string Tag { get; set; }
        /// <summary>
        /// 選中的標簽樣式
        /// </summary>
        public string TagCurr { get; set; }
        /// <summary>
        /// 分頁的路徑
        /// </summary>
        public string Url { get; set; }
        /// <summary>
        /// 當前頁
        /// </summary>
        public int PageIdnex { get; set; }
        /// <summary>
        /// 總頁數
        /// </summary>
        public int PageCount { get; set; }

        /// <summary>
        ///  實現分頁算法
        /// </summary>
        /// <returns></returns>
        public string CreatePage( )
        {

            //1.1當前頁大於總頁數
            if (PageIdnex > PageCount) return null;
            StringBuilder sb = new StringBuilder();
            //1.2當總頁數小於5條時，顯示全部的頁碼
            if (PageCount <= 5)
            {
                //拼接頁碼
                for (int i = 1; i <= PageCount; i++)
                {
                    if (PageIdnex == i)
                    {
                        //拼接當前頁
                        sb.Append($"<a  onclick=pager(\"{Url}\",{i}) class=\"{TagCurr}\">{i}</a>");
                    }
                    else
                    {
                        sb.Append($"<a onclick=pager(\"{Url}\",{i})>{i}</a>");
                    }
                }
                return sb.ToString();
            }
            else
            {
                //2.2 總頁數大於5，當前頁小於4時
                if (PageIdnex <= 4)
                {
                    //2.2.1 當前頁靠近尾頁
                    if (PageCount - PageIdnex <= 3)
                    {
                        //拼接第一頁
                        sb.Append($"<a onclick=pager(\"{Url}\",{1})>1</a><a>...</a>");
                        for (int i = PageIdnex - 1; i <= PageCount; i++)
                        {
                            if (PageIdnex == i)
                            {
                                //拼接當前頁
                                sb.Append($"<a onclick=pager(\"{Url}\",{i})  class=\"{TagCurr}\">{i}</a>");
                            }
                            else
                            {
                                sb.Append($"<a onclick=pager(\"{Url}\",{i})>{i}</a>");
                            }
                        }
                    }
                    else
                    {
                        //2.2.2當前頁靠近首頁
                        for (int i = 1; i <= PageIdnex + 2; i++)
                        {
                            if (PageIdnex == i)
                            {
                                sb.Append($"<a onclick=pager(\"{Url}\",{i}) class=\"{TagCurr}\">{i}</a>");
                            }
                            else
                            {
                                sb.Append($"<a onclick=pager(\"{Url}\",{i})>{i}</a>");
                            }
                        }
                        //拼接最后一頁
                        sb.Append($"<a>...</a><a onclick=pager(\"{Url}\",{PageCount})>{PageCount}</>");
                    }

                }
                else
                {
                    //2.3 總頁數大於5，當前頁大於4時
                    sb.Append($"<a onclick=pager(\"{Url}\",{1})>1</a><a>...</a>");
                    //2.3.1 當前頁大於4,當前頁離尾頁很近
                    if (PageCount - PageIdnex <= 2)
                    {
                        for (int i = PageIdnex - 2; i <= PageCount; i++)
                        {
                            if (PageIdnex == i)
                            {
                                sb.Append($"<a onclick=pager(\"{Url}\",{i}) class=\"{TagCurr}\">{i}</a>");
                            }
                            else
                            {
                                sb.Append($"<a onclick=pager(\"{Url}\",{i})>{i}</a>");
                            }
                        }
                    }
                    else
                    {
                        //2.3.2當前頁在中間
                        for (int i = PageIdnex - 2; i < PageIdnex + 2; i++)
                        {
                            if (PageIdnex == i)
                            {
                                sb.Append($"<a onclick=pager(\"{Url}\",{i}) class=\"{TagCurr}\">{i}</a>");
                            }
                            else
                            {
                                sb.Append($"<a onclick=pager(\"{Url}\",{i})>{i}</a>");
                            }
                        }
                        sb.Append($"<a>...</a><a onclick=pager(\"{Url}\",{PageCount})>{PageCount}</>");
                    }
                }

                return sb.ToString();
            }

 

 

控制器 var list = new List<string>();

for (int i = 1; i <= 100; i++)
            {
                list.Add("北京朝陽區" + i);
            }
            int pageSzie = 10;
            int pageCount = 0;
            if (list.Count % pageSzie == 0)
            {
                pageCount = list.Count / pageSzie;
            }
            else
            {
                pageCount = (list.Count / pageSzie) + 1;
            }
            PageHelper ph = new PageHelper
            {
                Tag = "a",
                TagCurr = "curr",
                Url = "/testpage/list/",
                PageIndex=pageIndex,
                PageCount=pagecount

            };
            var strHtml = ph.CreatePage();
            var pageList = list.Skip((pageIndex - 1) * pageSzie).Take(pageSzie).ToList();
            ViewBag.StrHtml = strHtml;
            ViewBag.PageList = pageList;

JS

function fenye_ok() {
    pager("/TestPage/list", 1);

}

function pager(href, pageIndex) {
    var num = $("#num").val();
    $("#div-load").load("/TestPage/list", { "pageIndex": pageIndex, "num": num }, function () { });
}