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?

Sep 01, 2017 pm 03:22 PM
how Selector page number

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!

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

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Java Tutorial
1655
14
PHP Tutorial
1252
29
C# Tutorial
1226
24
Why are word page numbers the same on every page? What should I do if the word page numbers are the same on every page? Why are word page numbers the same on every page? What should I do if the word page numbers are the same on every page? Mar 13, 2024 pm 09:34 PM

What’s the matter with the word page numbers being the same on every page? We all use document editing software in our daily work, but many users find that the page numbers on each page they set are the same when using the page number function. Let this site introduce it to users in detail. What should I do if the word page numbers are the same on every page? What should I do if the word page numbers are the same on every page? 1. Open Word, and then click the Insert option on the top menu bar. 2. Then click the page number and choose to set the page number format. 3. Then in the window that opens, select an "encoding" format. 4. Then check the "Start page number" option, enter 1, and click "OK"

How to solve garbled word page numbers How to solve garbled word page numbers Jun 25, 2023 pm 03:23 PM

Solution to garbled word page numbers: 1. Open the word document and click the "File" option in the upper left corner; 2. Select the "More" option, and then click the "Options" button; 3. Select "Advanced" in the word options; 4. . Find "Show field codes instead of field values" in "Show document content", remove the check in front, and click OK to return to the home page.

How do PPT page numbers start from page 4 to 1? PPT page number customization tutorial How do PPT page numbers start from page 4 to 1? PPT page number customization tutorial Mar 13, 2024 pm 05:52 PM

If the PPT has many pages, you can add page numbers to the PPT to make it look more organized. So can PPT page numbers be customized? Can I set page numbers starting from a certain page in PPT? If you don’t know the specific operation, you can take a look at the tutorial method below. How to set the ppt numbering to start from the fourth page: 1. Click "Slide Numbering" under the "Insert" menu. Entering the header and footer settings page, we can see that the slide number is not checked by default. 2. Click to check "Slide Number", and then click "Apply to All" to complete inserting the number. 3. You can see the insertion in the picture below

How to set Word page numbers so that odd and even pages are different on the left and right? How to set Word page numbers so that odd and even pages are different on the left and right? Mar 13, 2024 pm 06:13 PM

If you want to make the document look more personalized, you can set the Word page numbers to be different for odd and even pages. So how do you set the left and right page numbers for Word's odd and even pages to be different? Let’s take a look at the detailed tutorial below. If you don’t know how to operate it, just read on. Word setting method: 1. First, we click "Insert". 2. Then click "Footer". 3. Then click "Edit Footer". 4. Then click "Odd and Even Pages Are Different". 5. Then locate the footer of the odd-numbered page and click "Page Number". 6. Then we select the page style on the right.

Why is the word page number always the same as the previous page? Why is the word page number always the same as the previous page? Mar 13, 2024 pm 06:28 PM

When editing word, you will want to add page numbers to word to make it look more organized. However, after setting the page number, I found that the page number of each page of the document is the same. This problem is not uncommon. Let’s take a look at the detailed solution with the editor. Are all the Word page numbers exactly the same? 1. In the "Start" interface of Word, click "Page Number", click "Top of Page" in its drop-down menu bar, and select the ordinary number "2". 2. Then click "Page Number" on the page, and click "Set Page Number Format" in its drop-down menu bar&rdq

Use the :nth-child(n+3) pseudo-class selector to select the style of child elements whose position is greater than or equal to 3 Use the :nth-child(n+3) pseudo-class selector to select the style of child elements whose position is greater than or equal to 3 Nov 20, 2023 am 11:20 AM

Use the :nth-child(n+3) pseudo-class selector to select the style of child elements whose position is greater than or equal to 3. The specific code example is as follows: HTML code: &lt;divid="container"&gt;&lt;divclass="item"&gt ;First child element&lt;/div&gt;&lt;divclass="item"&

How to add page numbers to ppt How to add page numbers to ppt Mar 20, 2024 am 11:22 AM

In the process of making PPT, it seems that everyone pays more attention to its intuitiveness and operability, the content, and the design. Page numbers don’t seem to be of much concern to the public in PPT design. After all, PPT is generally presented in the form of a slide show, in which page numbers don’t seem to play a significant role. PPTs without page numbers are also acceptable. But from the perspective that the design must be complete, page number design must be an indispensable content in PPT production. Here we will share how to add page numbers to ppt. The method of adding page numbers to ppt is as follows: 1. Open a PPT, then create a new slide. We find &quot;Header and Footer&quot; under &quot;Insert&quot; and click &quot;Header and Footer&quot;. 2. After clicking on the header and footer, the options window will pop up.

How to change the word page number starting from the third page to 1 How to change the word page number starting from the third page to 1 Aug 04, 2023 pm 03:09 PM

Steps to start the Word page number from the third page to 1: 1. Open the Word document and locate the third page; 2. Insert a section break at the end of the third page; 3. In the footer of the third page, in order Click "Insert", "Page Number", "Bottom Margin", "Page Number Format", select the "Start with" option, and set it to "1"; 4. Go back to the first two pages and delete the page number; 5. In the footer of the third page, select the page number, right-click, and select "Update Field" in the pop-up menu to ensure that the page number is correctly displayed as "1".

See all articles