这段时间在做公司项目的时候需要用到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);
}
}
});
});
//点击@R_350_404@面
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);
}
}
上一页
下一页
