JQuery Pager implementation code, jquerypager

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.