这段时间在做公司项目的时候需要用到ajax进行分页(点击页码也是无刷新的显示上一页或下一页的内容,不是一般的选择跳转),但是在网上找了一下,大部分分页插件都是直接刷新跳转的,感觉和我的需求差距比较大,就自己动手写了一个可以实现自己需要的功能的js来实现这个控件,实现的效果如下:
因为业务需要,我需要在一个页面创建多个这样的页码控件(有些是在ajax中生成的),显然为每一个控件写一个专属的js是不现实的,所以,我将公共部分提取出来,然后通过传入的选择器不同,对不同的控件进行相应方法的调用。
下面是该控件实现的js代码:
5){
pageGroup(pageNum,pageCount[parseInt(totalnum)]);
}else{
$(this).addClass("on");
$(this).siblings("li").removeClass("on");
}
loadData(pageNum);//这个
方法里面就是ajax
获取数据的
代码,为了让这个
页码控件能够更通用,我将这个
方法写在
调用这个js的
PHP页面中,这样使得这个
页码控件能应用于更多的场景中。
});
//点击
上一页触发
$("#pageGro .pageUp").live("click",function(){
var totalnum = type+""+praise;
console.log(totalnum);
console.log(pageCount);
if(pageCount[parseInt(totalnum)] > 5){//初始
默认
显示1-5页(若真实
页码小于五,则根据真实
页码数
显示)
var pageNum = parseInt($(this).children("li.on").html());//
获取当前页
pageUp(pageNum,pageCount[parseInt(totalnum)]);
loadData(pageNum);
}else{
var index = $("#pageGro ul li.on").index();//
获取当前页
console.log("index = "+index);
if(index > 0){
$(this).next().find("li").removeClass("on");//清除所有选中
$(this).next().find("ul li").eq(index-1).addClass("on");//选中
上一页
loadData(index);
}
}
});
//点击
下一页触发
$("#pageGro .pageDown").live("click",function(){
var totalnum = type+""+praise;
console.log(totalnum);
console.log(pageCount[parseInt(totalnum)]);
if(pageCount[parseInt(totalnum)] > 5){
var pageNum = parseInt($(this).children("li.on").html());//
获取当前页
pageDown(pageNum,pageCount[parseInt(totalnum)]);
loadData(pageNum);
}else{
var index = $(this).children("ul li.on").index()+1;//
获取当前页
console.log(index);
if(index+1 < pageCount[parseInt(totalnum)]){
$(this).prev().find("li").removeClass("on");//清除所有选中
$(this).prev().find("ul li").eq(index+1).addClass("on");//选中
下一页
loadData(index+2);
}
}
});
});
//点击
跳转页面
function pageGroup(pageNum,pageCount){
switch(pageNum){
case 1:
page_icon(1,5,0);
break;
case 2:
page_icon(1,1);
break;
case pageCount-1:
page_icon(pageCount-4,pageCount,3);
break;
case pageCount:
page_icon(pageCount-4,4);
break;
default:
page_icon(pageNum-2,pageNum+2,2);
break;
}
}
//根据当前选中页
生成页面点击按钮
function page_icon(page,count,eq,element){
var $this = element;
var ul_html = "";
for(var i=page; i<=count; i++){
ul_html += "
"+i+"";
}
$this.children("ul").html(ul_html);
console.log($this.children("ul li:eq("+eq+")"));
$this.find("ul li:eq("+eq+")").addClass("on");
}
//
上一页
function pageUp(pageNum,pageCount){
switch(pageNum){
case 1:
break;
case 2:
page_icon(1,0);
break;
case pageCount-1:
page_icon(pageCount-4,2);
break;
case pageCount:
page_icon(pageCount-4,3);
break;
default:
page_icon(pageNum-2,1);
break;
}
}
//
下一页
function pageDown(pageNum,1);
break;
case 2:
page_icon(1,2);
break;
case pageCount-1:
page_icon(pageCount-4,4);
break;
case pageCount:
break;
default:
page_icon(pageNum-2,3);
break;
}
}
//
生成分页按钮
function createBtn(pageCount,element){
if(pageCount>5){
page_icon(1,element);
}else{
page_icon(1,element);
}
}
页面上该页码控件按钮的代码
2.$(".cumulative-eva a").live("click",function(){});