jQuery pager.js 插件动态分页功能实例分析

2020-05-19 07:28:43易采站长站整理

// if (clickpages.callback){
// clickpages.callback(parseInt(page));
// }
var i = parseInt(txt);
if(isNaN(i)||(i<=0)||i>clickpages.num){
return;
}else if(clickpages.num>6){
clickpages.newPages('jump',i);
}else{
var ele = clickpages.elem.children('li[page='+i+']');
clickpages.actPages(ele);
if (clickpages.callback){
clickpages.callback(i);
}
return;
}
if (clickpages.callback){
clickpages.callback(i);
}
}
});
},
//active
actPages:function (ele) {
ele.addClass('active').siblings().removeClass('active');
return clickpages.elem.children('li.active').text();
},
JumpPages:function () {
this.elem.next('div.pageJump').children('.button').click(function(){
var i = parseInt($(this).siblings('input').val());
if(isNaN(i)||(i<=0)||i>clickpages.num){
return;
}else if(clickpages.num>6){
clickpages.newPages('jump',i);
}else{
var ele = clickpages.elem.children('li[page='+i+']');
clickpages.actPages(ele);
if (clickpages.callback){
clickpages.callback(i);
}
return;
}
if (clickpages.callback){
clickpages.callback(i);
}
})
},
//newpages
newPages:function (type, i) {
var html = "",htmlLeft="",htmlRight="",htmlC="";
var HL = '<li><a>...</a></li>';
html = '<li class="topEnd"><a aria-label="Previous">首页</a></li>'
for (var n = 0;n<5;n++){
htmlC += '<li '+((n-1)==0?'class="active"':'')+' page="'+(i+n-1)+'"><a>'+(i+n-1)+'</a></li>';
htmlLeft += '<li '+((n+2)==i?'class="active"':'')+' page="'+(n+2)+'"><a>'+(n+2)+'</a></li>';
htmlRight += '<li '+((set.num+n-5)==i?'class="active"':'')+' page="'+(set.num+n-5)+'"><a>'+(set.num+n-5)+'</a></li>';
}
switch (type) {
case "next":
if(i<=4){
html+='<li page="1"><a>1</a></li>'+htmlLeft+HL+'<li page="'+set.num+'"><a>'+set.num+'</a></li>';
}else if(i>=(set.num-3)){
html+='<li page="1"><a>1</a></li>'+HL+htmlRight+'<li page="'+set.num+'"><a>'+set.num+'</a></li>';
}else{
html += '<li page="1"><a>1</a></li>'+HL+htmlC+HL+'<li page="'+set.num+'"><a>'+set.num+'</a></li>';
}
break;