Using mvc+bootstrap to build a personal blog to create a fresh paging helper (c) practical skills

Source: Internet
Author: User
Tags prev

0. Did not find a favorite page plug, and do not want to use ready-made (ugly to the explosion), so do your own to build a bar

First look at the effect (actually not a drop ...) :

My station address: my bootstrap station;

PS: (Ask Blog Park: Why always delete my top casually? The last reading volume is nearly 500, also give me a minute to delete from the home page ... It's really silent < blog Park address:>).

Somewhat alternative, pagination is directly in the background stitching good HTML, and then sent to the foreground:

1. Paging Container:

<div class= "pagination" >
//************ paging html*********
</div >

2. Pagerhelper:

Namespace Zyn. BLOG. Webhelper {public class Pagerhelper {///<summary>///raw page HTML data///</summary>///<param name= "current Page > Current page </param>///<param name= "pageSize" > Page capacity </param>///<param name= "TotalCount" > Data Total bar </param>///<returns>pagerHtmlString</returns> public static string generatepagerstring (int  currentpage, int pageSize, int totalcount) {var redirecttourl = HttpContext.Current.Request.Url.AbsolutePath; pageSize = PageSize <= 0?
1.0 total Pages int totalpages = Math.max ((totalcount + pageSize-1)/pageSize, 1); 2.0 the capacity int pagebarsize = 6;//The default one page page displays 6 pages. Paging bar capacity//3.0 The number of totalpages pages by Pagebarsize = 6 can be divided into the number of pagination int pagebarnum = (totalpages + pageBarSize-1)/Pagebarsi Ze 
Totalpages=13, that is, 13 pages divided into 3 pagination//To determine the current page currentpage is located in the first few pagination within the int position = (currentPage-1)/pagebarsize;
According to the ordinal of the page bar, calculate the first page number of the page start and the last page end int start = position * pagebarsize + 1; If it is the last page bar, you need to determine its actual paging capacity;Otherwise, the page bar capacity is pagebarsize int curbarcapacity = pagebarsize;
if (position = = pageBarNum-1) {curbarcapacity = TotalPages-(pageBarNum-1) * pagebarsize;}
StringBuilder pagerhtmlstring = new StringBuilder ();
StringBuilder endhtmlstring = new StringBuilder (); Processing Home Pagerhtmlstring.appendformat ("<li id= ' start-page ' ><a href= ' {0}?pageindex={1}&pagesize={2} '"
> Home </a></li> ", Redirecttourl, 1, pageSize); Process Previous page: If the current page is not the first page, add the previous page if (CurrentPage > 1) {pagerhtmlstring.appendformat ("<li class= ' prev-page ' ><a
Href= ' {0}?pageindex={1}&pagesize={2} ' > Prev </a></li> ', Redirecttourl, currentPage-1, pageSize);} If start position is 1 7 for (int i = 0; i < curbarcapacity; i++)//curbarcapacity=3 i=0 1 2 {int J = start + I;//the page number to display when Measure if (j = = CurrentPage) {//Processing of current page: Class=active pagerhtmlstring.appendformat ("<li class= ' active Show-page ' ><
Span>{0}</span></li> ", currentpage); if (curbarcapacity = = pagebarsize) {//Don't handle the last onePage page if (currentpage = = start + pageBarSize-1) {if (currentpage + 1 < totalpages) {Endhtmlstring.appendformat ("< Li class= ' show-page ' ><a href= ' {0}?pageindex={1}&pagesize={2} ' >{3}</a></li> ',
Redirecttourl, CurrentPage + 1, pageSize, currentpage + 1);
} endhtmlstring.append ("<li class= ' show-page ' ><span>...</span></li>"); Endhtmlstring.appendformat ("<li class= ' show-page ' ><a href= ' {0}?pageindex={1}&pagesize={2} ' >{3}"
</a></li> ", Redirecttourl, TotalPages, PageSize, totalpages); }} else {Pagerhtmlstring.appendformat ("<li class= ' show-page ' ><a href= ' {0}?pageindex={1}&pagesize={2}
' >{3}</a></li> ', Redirecttourl, J, PageSize, j);}
Processing of ellipses Pagerhtmlstring.append (endhtmlstring.tostring ()); Process Next page: If the current page is not the last page, add the next page. That is, all the page bars in the middle show the next page if (currentpage!= totalpages) {Pagerhtmlstring.appendformat ("<li class= ' next-page ' ><a ') to href = ' {0}?pageindex={1}&pagesize={2} ' > next page;/a></li> ", Redirecttourl, CurrentPage + 1, pageSize);} Process last page Pagerhtmlstring.appendformat ("<li id= ' end-page ' ><a href= ' {0}?pageindex={1}&pagesize={2} ' >
Last </a></li> ", Redirecttourl, TotalPages, pageSize); Pagerhtmlstring.appendformat ("<li id= ' total-page ' ><span> total-{0}-page </span></li>", TotalPages
Pagerhtmlstring.append ("");
return pagerhtmlstring.tostring ();  }

Page HTML rendered by

3 is like this:

<div class= "pagination" > <ul> <li id= "start-page" ><a href= "/home/wrapartlist/0?pageindex=1" &pagesize=6 "> Home </a></li> <li class=" Active Show-page "><span>1</span></li > <li class= "show-page" ><a href= "/home/wrapartlist/0?pageindex=2&pagesize=6" >2</a></ li> <li class= "show-page" ><a href= "/home/wrapartlist/0?pageindex=3&pagesize=6" >3</a>< /li> <li class= "show-page" ><a href= "/home/wrapartlist/0?pageindex=4&pagesize=6" >4</a> </li> <li class= "show-page" ><a href= "/home/wrapartlist/0?pageindex=5&pagesize=6" >5</a ></li> <li class= "next-page" ><a href= "/home/wrapartlist/0?pageindex=2&pagesize=6" > next page </a></li> <li id= "end-page" ><a href= "/home/wrapartlist/0?pageindex=5&pagesize=6" > last page </a></li> <li id= "total-page" ><span> total page </Span></li> </ul> </div>  

4. CSS styles:

/* pagination style pagination = = * * Pagination {/* div pagination*/margin:0; padding:20px; text-align:center
Display:block; }. pagination ul {display:inline-block; *display:inline; *zoom:1; margin-left:0; margin-bottom:0; padding:0; pag Ination ul > li {display:inline; pagination ul > li > A,. pagination ul > li > Span {margin:0 2px; f
padding:5px 12px;
Background-color: #ddd;
Color: #666;
Opacity:. 88; Pagination ul > li > A:hover,. pagination ul > li > A:focus {background-color: #bce8f1; pagination ul & gt;. Active > A,. pagination ul >. Active > Span {background-color: #45B6F7; color: #fff; pagination ul > . Active > A,. pagination ul >. Active > Span {cursor:default}. pagination ul > li > Span,. pagination U L > Disabled > span,. pagination ul > Disabled > A,. pagination ul >. Disabled > A:hover,. pagination UL > Disabled > A: Focus {color: #999999; background-color:transparent; Cursor:default}//* custom pagination End = =  

The above is a small series to introduce the use of mvc+bootstrap build personal blog to create a fresh page helper (iii), I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.