MVC產生頁碼選取器返回HTML代碼，mvc頁碼選取器html

MVC產生頁碼選取器返回HTML代碼，mvc頁碼選取器html

 我主要講此代碼用於MVC的分布頁。

先看最終效果最終效果：

樣式為bootstrap3中的分頁“pagination”，如果不使用bootstrap單獨提出來並不大

頁碼產生代碼為：

public string GetPaginationHtml(PaginationViewModel p){    var PageNum = p.Page;//當前頁碼（頁碼從1開始）    var PageCount = p.PageCount;//總頁數    var ItemCount = p.ItemCount;//總條數    var showPageNum = 6;//顯示數位頁面數量    var html = new StringBuilder();    html.Append(string.Format("<ul class='pagination' id='{0}' data-data='{1}'>", p.ULID, p.Data));//ULID和Data是方便在前台增加事件用的    if (PageCount > 1)    {        var startPage = 1;        if (showPageNum > PageCount)        {            startPage = 1;        }        else        {            if (PageNum - (showPageNum / 2) <= 0)            {                startPage = 1;            }            else if (PageNum + (showPageNum / 2) >= PageCount)            {                startPage = PageCount - showPageNum;            }            else            {                startPage = PageNum - (showPageNum / 2);            }        }        startPage = (startPage == 0 ? 1 : startPage);//第一個開始顯示數位頁碼        //上一頁按鈕        html.Append(string.Format("<li class='{0}'><a href='#' class='js-pageSelect' data-page='{1}'><span>上一頁</span></a></li>", PageNum <= 1 ? "disabled" : "", PageNum - 1));        if (startPage > 1)//產生第一頁按鈕和中間省略符號        {            html.Append("<li><a class='js-pageSelect'' href='#' data-page='1'>1</a></li>");            if (startPage > 2)            {                html.Append("<li><span>...</span></li>");            }        }        for (int i = startPage; i <= (startPage + showPageNum); i++)//產生頁碼        {            if (i > PageCount)            {                break;            }            html.Append(string.Format("<li class='{0}'><a class='js-pageSelect'' href='#' data-page='{1}'>{2}</a></li>", i == PageNum ? "active" : "", i, i));        }        //產生最後一頁按鈕和中間省略符號        int maxShowPage = startPage + showPageNum;        if (maxShowPage <= PageCount - 1)        {            if(maxShowPage <= PageCount - 2)            {                html.Append("<li><span>...</span></li>");            }            html.Append(string.Format("<li><a class='js-pageSelect'' href='#' data-page='{0}'>{1}</a></li>",PageCount,PageCount));        }        //顯示下一頁按鈕        html.Append(string.Format("<li class='{0}'><a href='#' class='js-pageSelect' data-page='{1}'><span>下一頁</span></a></li>", PageNum >= PageCount ? "disabled" : "", PageNum + 1));        //顯示頁碼資訊        html.Append(string.Format("<li><span>第{0}頁 共{1}頁{2}條內容</span></li>", PageNum, PageCount, ItemCount));    }    else    {        //內容不足一頁時顯示的內容        html.Append(string.Format("<li><span>共1頁{0}條內容</span></li>", ItemCount));    }    return html.ToString();}

用的時候直接放到MVC Controllers 中ActionResult 返回Content(html)。

頁面中可以直接  @Html.Action("", new {page = 1,pageSize = 20, ... }) 也可以

$.ajax({  url: '/Function/FileArchiveSelectShouWenDengJiTableMessage',  type: 'post',  dataType: 'html',  data: {    page: page,    pageSize: pagesize,    ...    },}).done(function (data) {  $('#ShouWenPageSelect').html(data);  InitPageSelectEvent();});