Html paging,

Html paging,

1. CSS

1/* 2 * page number button style 3 */4. page_div span: nth-of-type (2) {5 float: right; 6} 7. page_div a: last-child {8 margin-right: 0; 9} 10. page {11 padding-right: 21px; 12} 13. page_div a {14 min-width: 30px; 15 height: 28px; 16 border: 1px solid # a6acb7; 17 text-align: center; 18 margin: 0 3px; 19 cursor: pointer; 20 line-height: 28px; 21 color: #000; 22 font-size: 13px; 23 display: inline-block; 24 background: # fff; 25} 2 6 27. page_div. current {28 color: # FFFFFF; 29 border: none! Important; 30 background-color: # 44884f; 31 32} 33. page_div. current: hover {34 color: # FFFFFF; 35 border: none! Important; 36 background-color: # 44884f; 37} 38. totalPages {39 margin: 0 10px; 40} 41 42. totalPages span, 43. totalSize span {44 color: #0073A9; 45 margin: 0 5px; 46} 47 48/* end pagination reference external style */

View Code

2. HTML

1 <div class="p_pager">2                                 <p class="page_div" id="page">3                                 4                                 </p>5                             </div>

 

3. JS

1 (function ($, window, document, undefined) {2 // defines the Paging Class 3 function Paging (element, options) {4 this. element = element; 5 // input parameter 6 this. options = {7 pageNo: options. pageNo | 1, 8 totalPage: options. totalPage, 9 totalSize: options. totalSize, 10 callback: options. callback 11}; 12 // initialize the paging html and css code according to the form parameter 13 this. init (); 14} 15 // Add public attributes and methods for Paging instance objects 16 Paging. prototype = {17 constructor: Paging, 18 init: function () {19 this. creatHtml (); 20 this. bindEvent (); 21 this. pageBtnHover (); 22}, 23 // page flip button hover effect 24 pageBtnHover: function () {25 $ ("# nextPage") 26. on ("mouseout", 27 function () {28 $ (this ). find ("img "). attr ("src", "/img/rightButtonPage.png"); 29}); 30 $ ("# prePage") 31. on ("mouseout", 32 function () {33 $ (this ). find ("img "). attr ("src", "/img/leftButtonPage.png"); 34}); 35 $ ("# nextPage") 36. on ("mouseover", 37 function () {38 $ (this ). find ("img "). attr ("src", "/img/pa_right_per.png"); 39}); 40 $ ("# prePage") 41. on ("mouseover", 42 function () {43 $ (this ). find ("img "). attr ("src", "/img/pa_left_per.png"); 44}); 45}, 46 creatHtml: function () {47 48 var me = this; 49 var content = ""; 50 var current = me. options. pageNo; 51 var total = me. options. totalPage; 52 var totalNum = me. options. totalSize; 53 content + = "<span> display & nbsp; <select id = 'selectpage'> <option> 10 </option> <option> 25 </option> <option> 50 </option> <option> 100 </option> </select> & nbsp; item result <span class = 'page'> </span> displays the 1st to "+ totalNum +" item result, total "+ total +" page </span> "; 54 content + = "<span> <a id = 'prepage'>  </a> "; 55 56 // when the total number of pages is greater than 6 57 if (total> 6) {58 // when the current number of pages is less than 5, The ellipsis 59 if (current <5) is displayed) {60 for (var I = 1; I <6; I ++) {61 if (current = I) {62 content + = "<a class = 'current'>" + I + "</a> "; 63} else {64 content + = "<a>" + I + "</a>"; 65} 66} 67 content + = "... "; 68 content + =" <a> "+ total +" </a> "; 69} else {70 // judge when the page number is at the end 71 if (current <total-3) {72 for (var I = current-2; I <current + 3; I ++) {73 if (current = I) {74 content + = "<a class = 'current'>" + I + "</a> "; 75} else {76 content + = "<a>" + I + "</a>"; 77} 78} 79 content + = "... "; 80 content + =" <a> "+ total +" </a> "; 81 // when the page number is in the middle part 82} else {83 content + = "<a> 1 </a>"; 84 content + = "... "; 85 for (var I = total-4; I <total + 1; I ++) {86 if (current = I) {87 content + = "<a class = 'current'>" + I + "</a> "; 88} else {89 content + = "<a>" + I + "</a> "; 90} 91} 92} 93} 94 // when the total number of pages is smaller than 6, 95} else {96 for (var I = 1; I <total + 1; I ++) {97 if (current = I) {98 content + = "<a class = 'current'>" + I + "</a> "; 99} else {100 content + = "<a>" + I + "</a> "; 101} 102} 103} 104 content + = "<a id = 'nextpage'>  </a> </span> "; 105 me.element.html (content); 106}, 107 // Add Page Operation Event 108 bindEvent: function () {109 var me = this; 110 me. element. off ('click', 'A'); 111 me. element. on ('click', 'A', function () {112 var num = sums (this).html (); 113 var id = $ (this ). attr ("id"); 114 if (id = "prePage") {115 if (me. options. pageNo = 1) {116 me. options. pageNo = 1; 117} else {118 me. options. pageNo = + me. options. pageNo-1; 119} 120} else if (id = "nextPage") {121 if (me. options. pageNo = me. options. totalPage) {122 me. options. pageNo = me. options. totalPage123} else {124 me. options. pageNo = + me. options. pageNo + 1; 125} 126 127} else if (id = "lastPage") {128 me. options. pageNo = me. options. totalPage; 129} else {130 me. options. pageNo = + num; 131} 132 me. creatHtml (); 133 if (me. options. callback) {134 me. options. callback (me. options. pageNo); 135} 136}); 137} 138}; 139 // initialize the paging object by using the jQuery object 140 $. fn. paging = function (options) {141 return new Paging ($ (this), options); 142} 143}) (jQuery, window, document );

View Code

4. Call

1 (function ($, window, document, undefined) {2 $. extend ({3 pageTest: function (options) {4 var settings = {5 row: 10, 6}; 7 getData (); 8 function getData () {9 // call the interface to obtain data 10 //.... 11 // display page 12 showPage (); 13} 14 15 function showPage (pageNo, total) {16 var totalPage = Math. ceil (total/settings. row); 17 $ ("# page "). paging ({18 pageNo: pageNo, 19 totalPage: totalPage, 20 totalSize: total, 21 callback: function (num) {22 settings. page = num; 23 // call the interface to obtain data 24 getData (); 25} 26}); 27 $ ("# selectPage "). val (settings. row); 28} 29} 30}); 31 32}) (jQuery, window, document );

View Code