Detailed description of the HTML code returned by the page selector generated by MVC.

Detailed description of the HTML code returned by the page selector generated by MVC.

I mainly talk about this code for the distribution page of MVC.

First look at the final effect:

The style is the pagination page in bootstrap3. It is not large if we do not use bootstrap alone.

Page number generation code:

Public string GetPaginationHtml (PaginationViewModel p) {var PageNum = p. page; // the current Page number (the Page number starts from 1) var PageCount = p. pageCount; // the total number of pages var ItemCount = p. itemCount; // The total number of entries var showPageNum = 6; // The number of pages for displaying numbers var html = new StringBuilder (); html. append (string. format ("<ul class = 'pagination' id = '{0} 'data-data =' {1} '>", p. ULID, p. data); // ULID and Data are the 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); // the page number of the first displayed number // html of the previous page button. append (string. format ("<li class = '{0}'> <a href = '#' class = 'js-pageSelect 'data-page =' {1} '> <span> previous Page </span> </a> </li> ", pageNum <= 1? "Disabled": "", PageNum-1); if (startPage> 1) // generate the first page button and intermediate ellipsis {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 ++) // generate the page number {if (I> PageCount) {break;} html. append (string. format ("<li class = '{0}'> <a class = 'js-pageSelect 'href =' # 'data-pag E = '{1}'> {2} </a> </li> ", I = PageNum? "Active": "", I, I);} // generate the button for the last page and the intermediate ellipsis 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);} // display the next page button html. append (string. format ("<li class = '{0}'> <a href = '#' class = 'js-page Select 'data-page = '{1}'> <span> next page </span> </a> </li> ", PageNum> = PageCount? "Disabled": "", PageNum + 1); // display page number html. append (string. format ("<li> <span> {0} page {1} page {2} content </span> </li>", PageNum, PageCount, itemCount);} else {// The html content displayed when the content is less than one page. append (string. format ("<li> <span> 1 page {0} items </span> </li>", ItemCount);} return html. toString ();}

Put it in MVC Controllers directly when using ActionResult to return Content (html ).

On the page, you can directly

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

Yes.

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

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.