This example for you to share the jquery pager page of the specific implementation code, for your reference, the specific contents are as follows
Effect Chart:
Code:
HTML code:
CSS code:
. pager-box:after{
Display:block;
height:0;
Visibility:hidden;
Clear:both;
Content: ';
}
. pager{
Float:left;
position:relative;
left:50%;
Font-family: Microsoft James Black;
Pager A,.pager span{
position:relative;
left:-50%;
Display:block;
Float:left;
margin-left:5px;
border:1px solid #b6bcc1;
padding:5px 10px;
Text-decoration:none;
Color: #b6bcc1;
Border-radius:3px
}
. Pager span{
border:0;
Pager a.js-selected{
background: #b6bcc1;
Color: #fff;
Cursor:default
}
. Pager a.js-disabled{
background: #f1f1f1;
Border-color: #f1f1f1;
Cursor:default;
Color: #fff;
}
Pager.js Code
(Function (window, undefined) {/** * Creates an element node and returns the */function Create (TagName, ClassName, parent) {var element = Documen
T.createelement (TagName);
Element.classname = ClassName;
Parent.appendchild (Element);
return element;
/** * Array eliminates duplicate */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 result;
/** * 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 = Aclas
S.indexof (ClassName);
if (Index > 0) aclass.splice (index, 1);
Element.classname = Aclass.join ("); /** * Check to see if the class name * @param element * @param className * @returns {Boolean}/function Hasclassname (element, CLASSN
AME) {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.onchange;
Initialize the pager this.__init (obj);
};
var pro = Pager.prototype;
/** * Initialize the pager/pro.__init = function (obj) {if (This.__total < this.__index) return;
Storage number this.__numbers = [];
Store ellipsis this.__dots = [];
This.__wrapper = Create (' div ', ' pager-box ', this.__parent);
This.__body = Create (' div ', ' pager ', this.__wrapper);
Store on page this.__prebtn = Create (' A ', ' prev ', this.__body);
This.__prebtn.href = ' javascript:void (0); '; This.__prebtn.innertext = (Obj.label && obj.label.prev) | |
' on a page ';
Storage 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);
};
for (var i = 0; i < 7; i++) {var t = Create (' A ', ' number ', this.__body);
T.href = ' javascript:void (0); ';
This.__numbers.push (t);
}//Save 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.__doclick = function (e) {var e = e | | window.event, target = E.target | | e.srcelement;
Click the ellipsis if (target.tagName.toLowerCase () = = ' span ') return;
Click on the previous page that cannot be clicked or the next page if (Hasclassname (target, ' js-disabled ')) return;
Click on the current page if (Hasclassname (target, ' js-selected ')) return;
if (target = = this.__prebtn) {//Click on the previous page this._$setindex (this.__index-1); }else if (target = = this.__nextbtn) {//Click Next page this._$setindex (thIs.__index + 1);
}else{//clicked the number var index = Target.innertext;
This._$setindex (index);
}
};
/** * Jump Page * * * Pro._$setindex = function (index) {index = parseint (index);
Update information if (index!= this.__index) {this.__last = This.__index;
This.__index = index;
}//Processing delclassname (this.__prebtn, ' js-disabled ');
Delclassname (this.__nextbtn, ' js-disabled ');
if (This.__total < 8) {//The total number of pages less than 8 if (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.__tot
Al + 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})};
/** * Get the total number of pages */Pro._$getindex = function () {return this.__index;
};
/** * Get last page/pro._$getlast = function () {return this.__last;
}; becomes the global window.
Pager = Pager;
}) (window);
Main ideas:
The paging device is divided into the following 4 types of situations:
Situation 1, when total < 8 o'clock, all the page numbers are displayed.
situation 2, when total >= 8 and Index < 5 o'clock, displays 1-6 and the last page.
Situation 3, when total >= 8 and index > Total-4, the 1 and last 6 items are displayed.
situation 4, when total >= 8 and 5 <= index <= total-4, display 1 and the last page, and the middle 5 items.
Pager a Setting object when the class is instantiated:
{parent:element,//Set parent node Index:index for Pager,//
Set Current page
total:total,//Set total number of pages
onchange:function () {} Page change callback function
}
When we instantiate the pager, execute the statement in the body of the pager function, assign the value first, and then execute the initialization function:
var Pager = function (obj) {
//assignment
this.__total = obj.total | | 1;
This.__index = Obj.index | | 1;
This.__parent = obj.parent;
This.__onchange = Obj.onchange;
Initializes the pager
this.__init (obj);
Initialize function This.__init structure:
Pager.prototype.__init = function (obj) {
(processed according to the analysis above) ...
This._$setindex (This.__index); Jump to initial page
//Binding pager Click function
This.__body.onclick = This.__doclick.bind (this);
Initialization is completed, the click will make a corresponding judgment, and use This._$setindex (index) to jump.
For more articles on pagination tutorials, see the following topics:
JavaScript paging feature operations
jquery paging feature operations
PHP paging feature operations
ASP. NET paging feature Operation
Download: Paper
The above is the entire content of this article, I hope to help you learn.