好资源导航 » 文章资讯 » 基于jquery.page.js实现分页效果

基于jquery.page.js实现分页效果

2023-09-18 13:10:05 61

基于jquery.page.js的一款简单的分页效果，供大家参考，具体内容如下





简单的jQuery分页插件

调用方法如下：

$(".tcdPageCode").createPage({
pageCount:10,
current:1,
backFn:function(p){
//单击回调方法，p是当前页码
}
});

pageCount：总页数
current：当前页

以下是jquery.page.js源代码：

(function($){
varms={
init:function(obj,args){
return(function(){
ms.fillHtml(obj,args);
ms.bindEvent(obj,args);
})();
},
//填充html
fillHtml:function(obj,args){
return(function(){
obj.empty();
//上一页
if(args.current>1){
obj.append('上一页');
}else{
obj.remove('.prevPage');
obj.append('上一页');
}
//中间页码
if(args.current!=1&&args.current>=4&&args.pageCount!=4){
obj.append(''+1+'');
}
if(args.current-2>2&&args.current<=args.pageCount&&args.pageCount>5){
obj.append('...');
}
varstart=args.current-2,end=args.current+2;
if((start>1&&args.current<4)||args.current==1){
end++;
}
if(args.current>args.pageCount-4&&args.current>=args.pageCount){
start--;
}
for(;start<=end;start++){
if(start<=args.pageCount&&start>=1){
if(start!=args.current){
obj.append(''+start+'');
}else{
obj.append(''+start+'');
}
}
}
if(args.current+2=1&&args.pageCount>5){
obj.append('...');
}
if(args.current!=args.pageCount&&args.current'+args.pageCount+'');
}
//下一页
if(args.current下一页');
}else{
obj.remove('.nextPage');
obj.append('下一页');
}
})();
},
//绑定事件
bindEvent:function(obj,args){
return(function(){
obj.on("click","a.tcdNumber",function(){
varcurrent=parseInt($(this).text());
ms.fillHtml(obj,{"current":current,"pageCount":args.pageCount});
if(typeof(args.backFn)=="function"){
args.backFn(current);
}
});
//上一页
obj.on("click","a.prevPage",function(){
varcurrent=parseInt(obj.children("span.current").text());
ms.fillHtml(obj,{"current":current-1,"pageCount":args.pageCount});
if(typeof(args.backFn)=="function"){
args.backFn(current-1);
}
});
//下一页
obj.on("click","a.nextPage",function(){
varcurrent=parseInt(obj.children("span.current").text());
ms.fillHtml(obj,{"current":current+1,"pageCount":args.pageCount});
if(typeof(args.backFn)=="function"){
args.backFn(current+1);
}
});
})();
}
}
$.fn.createPage=function(options){
varargs=$.extend({
pageCount:10,
current:1,
backFn:function(){}
},options);
ms.init(this,args);
}
})(jQuery);

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
514930285
czq8825@qq.com