Heim  >  Artikel  >  Web-Frontend  >  Detaillierte Erklärung, wie MVC einen Seitenzahlselektor generiert, um HTML-Code zurückzugeben?

Detaillierte Erklärung, wie MVC einen Seitenzahlselektor generiert, um HTML-Code zurückzugeben?

黄舟
黄舟Original
2017-09-01 15:22:211773Durchsuche

Ich spreche hauptsächlich davon, dass dieser Code für MVC-Verteilungsseiten verwendet wird.

Schauen Sie sich zuerst den endgültigen Effekt an:

Der Stil ist die Paginierung „Paginierung“ in Bootstrap3, sie ist nicht groß wenn Sie Bootstrap nicht verwenden.

Seitennummer Der generierte Code ist:

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=&#39;pagination&#39; id=&#39;{0}&#39; data-data=&#39;{1}&#39;>", 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=&#39;{0}&#39;>
        <a href=&#39;#&#39; class=&#39;js-pageSelect&#39; data-page=&#39;{1}&#39;>
        <span>上一页</span></a></li>", PageNum <= 1 ? "disabled" : "", PageNum - 1));

        if (startPage > 1)//生成第一页按钮和中间省略号
        {
            html.Append("<li><a class=&#39;js-pageSelect&#39;&#39; href=&#39;#&#39; data-page=&#39;1&#39;>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=&#39;{0}&#39;>
            <a class=&#39;js-pageSelect&#39;&#39; href=&#39;#&#39; data-page=&#39;{1}&#39;>{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=&#39;js-pageSelect&#39;&#39; href=&#39;#&#39; data-page=&#39;{0}&#39;>{1}</a></li>",PageCount,PageCount));
        }
        //显示下一页按钮
        html.Append(string.Format("<li class=&#39;{0}&#39;><a href=&#39;#&#39; class=&#39;js-pageSelect&#39; data-page=&#39;{1}&#39;>
        <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();
}

Wenn Sie ihn verwenden, geben Sie ihn direkt in MVC Controllers zurück. ActionResult gibt Inhalt (html) zurück.

Sie können direkt

@Html.Action("", new {page = 1,pageSize = 20, ... })

oder

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

Das obige ist der detaillierte Inhalt vonDetaillierte Erklärung, wie MVC einen Seitenzahlselektor generiert, um HTML-Code zurückzugeben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn