本文实例为大家分享了JQuery的Pager分页器的具体实现代码，供大家参考，具体内容如下
效果图：
代码：
css代码：
pager.js代码
- 创建元素节点并返回
*/
function create(tagName,className,parent){
var element = document.createElement(tagName);
element.className = className;
parent.appendChild(element);
return element;
}
/**
- 数组消除重复
*/
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;
}
/**
- 添加类名
*/
function addClassName(element,className){
var aClass = element.className.split(' ');
aClass.push(className);
aClass = clearRepeat(aClass);
element.className = aClass.join(' ');
}
/** - 删除类名
*/
function delClassName(element,className){
var aClass = element.className.split(' '),index = aClass.indexOf(className);
if(index > 0) aClass.splice(index,1);
element.className = aClass.join(' ');
}
/**
- 检查是否含有类名
- @param element
- @param className
- @returns {boolean}
*/
function hasClassName(element,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;
//初始化分页器
this.__init(obj);
};
var pro = Pager.prototype;
/**
- 初始化分页器
*/
pro.init = function(obj){
if(this.total < this.index) return;
//存储数字
this.numbers = [];
//储存省略号
this.dots = [];
this.wrapper = create('div','pager-Box',this.parent);
this.body = create('div','pager',this.wrapper);
//存储上一页
this.preBtn = create('a','prev',this.body);
this.preBtn.href = 'javascript:void(0);';
this.preBtn.innerText = (obj.label && obj.label.prev) || '上一页';
//存储数字
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',this.body);
t.href = 'javascript:void(0);';
this.__numbers.push(t);
}
}
//存储下一页
this.nextBtn = create('a','next',this.body);
this.nextBtn.href = 'javascript:void(0);';
this.nextBtn.innerText = (obj.label && obj.label.next) || '下一页';
//
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;
//点击省略号
if(target.tagName.toLowerCase() == 'span') return;
//点击了不能点击的上一页或者下一页
if(hasClassName(target,'js-disabled')) return;
//点击了当前页
if(hasClassName(target,'js-selected')) return;
if(target == this.preBtn){
//点击了上一页
this._$setIndex(this.index - 1);
}else if(target == this.nextBtn){
//点击了下一页
this._$setIndex(this.index + 1);
}else{
//点击了数字
var index = target.innerText;
this._$setIndex(index);
}
};
/**
- @R625404@数
*/
pro._$setIndex = function(index){
index = parseInt(index);
//更新信息
if(index != this.index){
this.last = this.index;
this.index = index;
}
//处理
delClassName(this.preBtn,'js-disabled');
delClassName(this.nextBtn,'js-disabled');
if(this.total < 8){
//总页数小于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-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
})
}
};
/**
- 得到总页数
*/
pro._$getIndex = function(){
return this.__index;
};
/** - 得到上一个页数
*/
pro._$getLast = function(){
return this.__last;
};
//变成全局
window.Pager = Pager;
})(window);
主要思路：
分页器共分为以下4种情况：
情况2，当total >= 8 且 index < 5时，显示1-6和最后一页。
情况3，当total >= 8 且 index > total - 4时，显示1和最后6项。
情况4，当total >= 8 且 5 <= index <= total - 4时，显示1和最后一页，和中间5项。
Pager类实例化时传入一个设置对象：
当我们实例化Pager时，执行Pager函数体内的语句，首先赋值，然后就执行初始化函数：
初始化函数this.__init结构：
...
this._$setIndex(this.__index); //跳转到初始页
//绑定分页器点击函数
this.body.onclick = this.doClick.bind(this);
};
初始化完成，点击后就会做出相应的判断，并使用this._$setIndex(index)进行跳转。
jquery分页功能操作
php分页功能操作
ASP.NET分页功能操作
以上就是本文的全部内容，希望对大家的学习有所帮助。
原文链接：https://www.f2er.com/jquery/49036.html