Home > Web Front-end > HTML Tutorial > Detailed explanation of how MVC generates page number selector to return HTML code?

Detailed explanation of how MVC generates page number selector to return HTML code?

黄舟
Release: 2017-09-01 15:22:21
Original
1806 people have browsed it

I mainly talk about this code being used for MVC distribution pages.

Let’s look at the final effect first:

##The style is the paging "pagination" in bootstrap3. If you don't use bootstrap, it is not big

Page number The generated code is:

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();
}
Copy after login

When used, place it directly in MVC Controllers. ActionResult returns Content (html).

You can directly enter

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

or

$.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();
});
Copy after login

The above is the detailed content of Detailed explanation of how MVC generates page number selector to return HTML code?. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template