Special effects of list paging in JavaScript

Special effects of list paging in JavaScript

Recently I wrote a js paging method. Although it is ready for use, I still want to write it by myself and figure it out. The final result is: Previous Page, first page ,... (N pages above), n pages ,... (N pages), last page, and next page. N can be an odd or even number. Generally, an odd number is used, and the input parameter is 5 when Xingshi calls it. Pay attention to the following points during writing:

When the page number is equal to 1, only the previous page, the first page, and the last page are displayed, and no jump is made;

When the page number is less than or equal to 2, n pages in the middle are not required;

When the page number is less than or equal to n, all pages are displayed, but no two "…" are displayed;

2 "…" When you change pages, you can change the number of pages. If the number of pages is near the top or the last, n pages are displayed at the beginning or last.

The following code is provided for discussion:

?

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 43 44 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 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110

// Total page number, current page number, jump address, number of pages displayed between the first page and the last page 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" href = "javascript: goPage (' + prev + ', \ "+ url + '\');"> <span> previous page </span> </a> </li> '; } Else { Str + = '<li> <a class = "prev" title = "previous" href = "javascript: void (0 ); "> <span> previous page </span> </a> </li> '; } If (tp> 1 ){ // Page 1 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 );   // Page number of the loop start Var s = cp-pnh; If (s <= 1 ){ S = 2; }   // Page number of the end of the loop Var 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 after the first page If (s> 2 ){ Var sp = cp-pn; If (sp <1 ){ Sp = 1; } Str + = '<li> <a name = "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> '; } }   // Multi-page jump before the last page If (e <(TP-1 )){ Var ep = cp + pn; If (ep> tp ){ Ep = tp; } Str + = '<li> <a name = "break" href = "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 = "javascript: 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 all the content of this article. I hope you will like it.