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

2023-08-18 06:32:04 56

本文实例讲述了jQuerypager.js插件动态分页功能。分享给大家供大家参考，具体如下：

pager.js代码

functionPage(opt){
varset=$.extend({num:null,startnum:1,elem:null,callback:null},opt||{});
if(set.startnum>set.num||set.startnum<1){
set.startnum=1;
}
varn=0,htm='';
varclickpages={
elem:set.elem,
num:set.num,
callback:set.callback,
init:function(){
this.elem.next('div.pageJump').children('.button').unbind('click')
this.JumpPages();
this.elem.children('li').click(function(){
vartxt=$(this).children('a').text();
varpage='',ele=null;
varpage1=parseInt(clickpages.elem.children('li.active').attr('page'));
if(isNaN(parseInt(txt))){
switch(txt){
case'下一页':
if(page1==clickpages.num){
return;
}
if(page1>=(clickpages.num-2)||clickpages.num<=6||page1<3){
ele=clickpages.elem.children('li.active').next();
}else{
clickpages.newPages('next',page1+1);
ele=clickpages.elem.children('li.active');
}
break;
case'上一页':
if(page1=='1'){
return;
}
if(page1>=(clickpages.num-1)||page1<=3||clickpages.num<=6){
ele=clickpages.elem.children('li.active').prev();
}else{
clickpages.newPages('prev',page1-1);
ele=clickpages.elem.children('li.active');
}
break;
case'首页':
if(page1=='1'){
return;
}
if(clickpages.num>6){
clickpages.newPages('首页',1);
}
ele=clickpages.elem.children('li[page=1]');
break;
case'尾页':
if(page1==clickpages.num){
return;
}
if(clickpages.num>6){
clickpages.newPages('尾页',clickpages.num);
}
ele=clickpages.elem.children('li[page='+clickpages.num+']');
break;
case'...':
return;
}
}else{
//if((parseInt(txt)>=(clickpages.num-3)||parseInt(txt)<=3)&&clickpages.num>6){
//clickpages.newPages('jump',parseInt(txt));
//}
//ele=$(this);
//}
//page=clickpages.actPages(ele);
//if(page!=''&&page!=page1){
//if(clickpages.callback){
//clickpages.callback(parseInt(page));
//}
vari=parseInt(txt);
if(isNaN(i)||(i<=0)||i>clickpages.num){
return;
}elseif(clickpages.num>6){
clickpages.newPages('jump',i);
}else{
varele=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');
returnclickpages.elem.children('li.active').text();
},
JumpPages:function(){
this.elem.next('div.pageJump').children('.button').click(function(){
vari=parseInt($(this).siblings('input').val());
if(isNaN(i)||(i<=0)||i>clickpages.num){
return;
}elseif(clickpages.num>6){
clickpages.newPages('jump',i);
}else{
varele=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){
varhtml="",htmlLeft="",htmlRight="",htmlC="";
varHL='...';
html='首页'
for(varn=0;n<5;n++){
htmlC+=''+(i+n-1)+'';
htmlLeft+=''+(n+2)+'';
htmlRight+=''+(set.num+n-5)+'';
}
switch(type){
case"next":
if(i<=4){
html+='1'+htmlLeft+HL+''+set.num+'';
}elseif(i>=(set.num-3)){
html+='1'+HL+htmlRight+''+set.num+'';
}else{
html+='1'+HL+htmlC+HL+''+set.num+'';
}
break;
case"prev":
if(i<=4){
html+='1'+htmlLeft+HL+''+set.num+'';
}elseif(i>=(set.num-3)){
html+='1'+HL+htmlRight+''+set.num+'';
}else{
html+='1'+HL+htmlC+HL+''+set.num+'';
}
break;
case"首页":
html+='1'+htmlLeft+HL+''+set.num+'';
break;
case"尾页":
html+='1'+HL+htmlRight+''+set.num+'';
break;
case"jump":
if(i<=4){
if(i==1){
html+='1'+htmlLeft+HL+''+set.num+'';
}else{
html+='1'+htmlLeft+HL+''+set.num+'';
}
}elseif((i>=set.num-3)&&(set.num>=7)){
if(i==set.num){
html+='1'+HL+htmlRight+''+set.num+'';
}else{
html+='1'+HL+htmlRight+''+set.num+'';
}
}else{
html+='1'+HL+htmlC+HL+''+set.num+'';
}
}
html+='尾页';
if(this.num>5||this.num<3){
set.elem.html(html);
clickpages.init({num:set.num,elem:set.elem,callback:set.callback});
}
}
}
if(set.num<=1){
$(".pagination").html('');
return;
}elseif(parseInt(set.num)<=6){
n=parseInt(set.num);
varhtml='首页';
for(vari=1;i<=n;i++){
if(i==set.startnum){
html+=''+i+'';
}else{
html+=''+i+'';
}
}
html+='尾页';
set.elem.html(html);
clickpages.init();
}else{
clickpages.newPages("jump",set.startnum)
}
}

上面是pager.js部分

html部分








前往

页
GO

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery切换特效与技巧总结》、《jQuery遍历算法与技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

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

热门推荐

随机推荐