JQuery Pager implementation code, jquerypager
The example in this article shares the specific implementation code of JQuery's Pager splitter for your reference. The specific content is as follows:
:
Code:
Html code:
<! DOCTYPE html>
Css code:
. Pager-box: after {display: block; height: 0; visibility: hidden; clear: both; content :'';}. pager {float: left; position: relative; left: 50%; font-family: ;}. pager ,. pager span {position: relative; left:-50%; display: block; float: left; margin-left: 5px; border: 1px solid # b6bcc1. padding: 5px 10px; text-decoration: none; color: # b6bpc3; border-radius: 3px ;}. pager span {border: 0 ;}. pager. js-selected {background: # b6bpc3; color: # fff; cursor: default ;}. pager. js-disabled {background: # f1f1f1; border-color: # f1f1f1; cursor: default; color: # fff ;}
Pager. js Code
(Function (window, undefined) {/*** create an element node and return */function create (tagName, className, parent) {var element = document. createElement (tagName); element. className = className; parent. appendChild (element); return element;}/*** array deduplication */function clearRepeat (arr) {var obj ={}, result = []; for (var I = 0, len = arr. length; I <len; I ++) {obj [arr [I] = 1 ;}for (var I in obj) {result. push (I);} return r Esult;}/*** add class name */function addClassName (element, className) {var aClass = element. className. split (''); aClass. push (className); aClass = clearRepeat (aClass); element. className = aClass. join ('');}/*** Delete class name */function delClassName (element, className) {var aClass = element. className. split (''), index = aClass. indexOf (className); if (index> 0) aClass. splice (index, 1); element. className = aCl Ass. join ('');}/*** check whether the class name * @ param element * @ param className * @ returns {boolean} */function hasClassName (element, className) is included) {var aClass = element. className. split (''), index = aClass. indexOf (className); if (index> 0) return true; return false;} var Pager = function (obj) {this. _ total = obj. total | 1; this. _ index = obj. index | 1; this. _ parent = obj. parent; this. _ onchange = obj. oncha Nge; // initialize the page splitter this. _ init (obj) ;}; var pro = Pager. prototype;/*** initialize the page splitter */pro. _ init = function (obj) {if (this. _ total <this. _ index) return; // store the number this. _ numbers = []; // stores the ellipsis this. _ dots = []; this. _ wrapper = create ('div ', 'pager-box', this. _ parent); this. _ body = create ('div ', 'pager', this. _ wrapper); // store the previous page this. _ preBtn = create ('A', 'prev', this. _ body); this. _ preBtn. href = 'objective C Ript: void (0); '; this. _ preBtn. innerText = (obj. label & obj. label. prev) | 'pret'; // store the number if (this. _ total <8) {for (var I = 0; I <this. _ total; I ++) {var t = create ('A', 'number', this. _ body); t. href = 'javascript: void (0); '; t. innerText = I + 1; this. _ numbers. push (t) ;}} else {for (var I = 0; I <2; I ++) {var t = create ('span ', 'dots', this. _ body); t. innerText = '... '; this. _ dots. push (t) ;}; fo R (var I = 0; I <7; I ++) {var t = create ('A', 'number', this. _ body); t. href = 'javascript: void (0); '; this. _ numbers. push (t) ;}// store the next page this. _ nextBtn = create ('A', 'Next', this. _ body); this. _ nextBtn. href = 'javascript: void (0); '; this. _ nextBtn. innerText = (obj. label & obj. label. next) | 'Next page'; // this. _ $ setIndex (this. _ index); // this. _ body. onclick = this. _ doClick. bind (this) ;}; pro. _ doCl Ick = function (e) {var e = e | window. event, target = e.tar get | e. srcElement; // click the ellipsis if (target. tagName. toLowerCase () = 'span ') return; // click the previous page or next page if (hasClassName (target, 'js-disabled') return; // click if (hasClassName (target, 'js-selected') return; if (target = this. _ preBtn) {// click the previous page this. _ $ setIndex (this. _ index-1);} else if (target = this. _ nextBtn) {// click the next page this. _ $ setIndex (th Is. _ index + 1);} else {// click the number var index = target. innerText; this. _ $ setIndex (index) ;}};/*** redirect page number */pro. _ $ setIndex = function (index) {index = parseInt (index); // update information if (index! = This. _ index) {this. _ last = this. _ index; this. _ index = index;} // process delClassName (this. _ preBtn, 'js-disabled '); delClassName (this. _ nextBtn, 'js-disabled '); if (this. _ total <8) {// if the total number of pages is less than 8 (this. _ last) delClassName (this. _ numbers [this. _ last-1], 'js-selected'); addClassName (this. _ numbers [this. _ index-1], 'js-selected'); if (this. _ index = 1) addClassName (this. _ preBtn, 'js-disabled '); if (this. _ index = this. _ total) addClassName (this. _ nextBtn, 'js-disabled ');} else {this. _ dots [0]. style. display = 'none'; this. _ dots [1]. style. display = 'none'; for (var I = 0; I <7; I ++) {delClassName (this. _ numbers [I], 'js-selected') ;}; if (this. _ index <5) {for (var I = 0; I <6; I ++) {this. _ numbers [I]. innerText = I + 1;} this. _ numbers [6]. innerText = this. _ total; this. _ dots [1]. style. display = 'block'; this. _ body. insertBefore (this. _ dots [1], this. _ numbers [6]); addClassName (this. _ numbers [this. _ index-1], 'js-selected'); if (this. _ index = 1) addClassName (this. _ preBtn, 'js-disabled ');} else if (this. _ index> this. _ total-4) {for (var I = 1; I <7; I ++) {this. _ numbers [I]. innerText = this. _ total + I-6;} this. _ numbers [0]. innerText = '1'; this. _ dots [0]. style. display = 'block'; this. _ body. insertBefore (this. _ dots [0], this. _ numbers [1]); addClassName (this. _ numbers [this. _ index + 6-this. _ total], 'js-selected'); if (this. _ index = this. _ total) addClassName (this. _ nextBtn, 'js-disabled ');} else {this. _ numbers [0]. innerText = '1'; for (var I = 1; I <6; I ++) {this. _ numbers [I]. innerText = this. _ index-3 + I; if (I = 3) addClassName (this. _ numbers [I], 'js-selected');} this. _ numbers [6]. innerText = this. _ total; this. _ dots [0]. style. display = 'block'; this. _ body. insertBefore (this. _ dots [0], this. _ numbers [1]); this. _ dots [1]. style. display = 'block'; this. _ body. insertBefore (this. _ dots [1], this. _ numbers [6]) ;}} if (typeof this. _ onchange = 'function') {this. _ onchange ({index: this. _ index, last: this. _ last, total: this. _ total}) }};/*** total page number */pro. _ $ getIndex = function () {return this. _ index ;};/*** get the previous page number */pro. _ $ getLast = function () {return this. _ last ;}; // Changes to global window. pager = Pager;}) (window );
Main ideas:
The page splitter can be divided into the following four situations:
Case 1When total is less than 8, all page numbers are displayed.
Case 2When total> = 8 and index <5, 1-6 and the last page are displayed.
Case 3When total> = 8 and index> total-4, 1 and the last 6 items are displayed.
Case 4When total> = 8 and 5 <= index <= total-4, 1 and the last page are displayed, and 5 items are in the middle.
When the Pager class is instantiated, a set object is input:
{Parent: element, // set the parent node index: index for the page sharer, // set the current page total: total, // set the total page number onchange: function () {} // page number change callback function}
When we instantiate Pager, execute the statements in the Pager function, assign values first, and then execute the initialization function:
Var Pager = function (obj) {// value this. _ total = obj. total | 1; this. _ index = obj. index | 1; this. _ parent = obj. parent; this. _ onchange = obj. onchange; // initialize the page splitter this. _ init (obj );};
Initialize the structure of the function this. _ init:
Pager. prototype. _ init = function (obj) {(process according to the above analysis )... this. _ $ setIndex (this. _ index); // jump to the initial Page // bind the page splitter and click the function this. _ body. onclick = this. _ doClick. bind (this );};
After Initialization is complete, click it to make the corresponding judgment and use this. _ $ setIndex (index) to redirect.