JavaScript Implementation list paging feature special effects

Recently wrote a JS pagination method, although there are ready-made can be used, but still want to write their own, to find out. The effect of the final implementation is: Previous page, first page 、... (Top N page numbers), n pages 、... (Next n page number), last page, next page. n can be odd or even, generally like to take the odd number, the star stone call when the parameters passed in is 5. When writing, the main attention to the following areas:

The page number equals 1 o'clock, displays only the previous page, the first page, the last page, and does not jump;

Page number is less than or equal to 2 o'clock, do not need the middle of n pages;

When the page number is less than or equal to n, all page numbers are displayed, and 2 "..." is not displayed.

2 "..." When changing the page, change n page number, if close to the front or the last few pages, then show the first or last n page number.

Here's a code for you to explore:

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26-27--28 29---30 31--32 33 34 35 36 37 38-39 40 41 42 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 5 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 The 109 110

Total pages, current pages, jump addresses, number of page numbers displayed between the first and last pages function Pagebar (TP,CP,URL,PN) {var str = ' <ul class= ' page ' > '; if (Tp>1 & & cp>1) {var prev = cp-1 str = ' <li><a class= ' prev ' title= ' previous page ' href= ' javascript:gopage (' +prev+ ', "+url+ ‘');” ><span> prev </span></a></li> '; }else{str = ' <li><a class= ' prev "title=" on page "href=" javascript:void (0); " ><span> prev </span></a></li> '; } if (tp>1) {//First page if (cp==1) {str = ' <li class= ' current ' ><a href= ' javascript:gopage (1, "+url+"); " ><span>1</span></a></li> '; }else{str = ' <li><a href= ' javascript:gopage (1, "+url+"); " ><span>1</span></a></li> '; }   if (tp>2) {var PNH = Math.floor (PN/2);  //Loop start Page var s = cp-pnh; if (s<=1) {s = 2;}  //Loop End page VA R e = CP+PNH; if (E>=TP) {e = tp-1}   if (s<= (1+PNH)) {if tp> (pn+2)) {e = s+ (pn-1); if (E>=TP) {e = tp-1;}} else{s = 2;}}   IF(e>= (TP-PNH)) {if (tp> (pn+2)) {s = e (pn-1); if (s<=1) {s = 2;}} else{e = tp-1;}}   if (e<s) {e = s;}  //multi-page jump if (s>2) {var sp = cp-pn after first page; if (sp<1) {sp=1} str = ' <li><a na Me= "Break" href= "Javascript:gopage (' +sp+ '," +url+ '); " ><span>...</span></a></li> '; }   for (Var i=s;i<=e;i++) {if (I==CP) {str = ' <li class= ' current ' ><a href= ' javascript:gopage (' +i+ ', "+ Url+ '); " ><span> ' +i+ ' </span></a></li> '; }else{str = ' <li><a href= ' javascript:gopage (' +i+ ', ' +url+ '); " ><span> ' +i+ ' </span></a></li> '; }  //Last page multi-page jump if (E < (tp-1)) {var EP = Cp+pn if (EP>TP) {ep=tp;} str = ' <li><a name= ' break ' HRE f= "Javascript:gopage (' +ep+ '," +url+ '); " ><span>...</span></a></li> '; }  //Last page if (CP==TP) {str = ' <li class= ' current ' ><a href= ' javascript:gopage (' +tp+ ', ' +url+ '); " ><span> ' +tp+ ' </SPAN></a></li> '; }else{str = ' <li><a href= ' javascript:gopage (' +tp+ ', ' +url+ '); " ><span> ' +tp+ ' </span></a></li> '; }  }else{str = ' <li class= ' current ' ><a href= ' javascript:void (0); " ><span>1</span></a></li> '; }   if (tp>1 && cp<tp) {var next = cp+1 str = ' <li><a class= ' next "title=" Next "href=" Javascri Pt:gopage (' +next+ ', ' +url+ '); " ><span> next page </span></a></li> '; }else{str = ' <li><a class= "Next" title= "Next" href= "javascript:void (0);" ><span> next page </span></a></li> '; str + = ' </ul> '; return str;  //Jump page number, jump address function gopage (cp,url) {window.location.href = URL+CP;}

The above is the entire contents of this article, I hope you can enjoy.