近期需要做一个平台，需要用到分页，
原型以及前端给的页面是纯html实现的，没有用到分页插件，于是就自己参照京东商品页的那种方式写了一个。1期先写死了 最多展示7个页签。后期考虑制作可定制化的。
源码如下：
vardefaultIndex=0;
varpageIndex=0;
varpageSize=20;
/*参数1：当前页,参数2：总页数,参数3：绑定查询函数，需要自定义实现，会传入查询页数和每页查询数*/
functionpageUtil(currentPage,totalPage,queryFunction){
varidx=0;
varpageIdxNum=0;//拥挤统计当前有几个页面标签，如果不足会补齐
currentPage++;
varpage='<上一页';
if(totalPage>7){
page+='1';
pageIdxNum++;
if((currentPage-2)>2){
page+='···';
pageIdxNum++;
}else if((currentPage-2)==2){
page+='2';
pageIdxNum++;
};
if((totalPage-currentPage)<3){
varvar1=totalPage-currentPage;
varvar3=4-var1;
while(var3>1){
idx=currentPage-var3;
page+=''+idx+'';
var3--;
pageIdxNum++;
}
}
if(currentPage>2&& currentPage<=totalPage){
idx=parseInt(currentPage)-1;
page+=''+idx+'';
pageIdxNum++;
}
if(currentPage>1&& currentPage!=totalPage ){
idx=parseInt(currentPage);
page+=''+idx+'';
pageIdxNum++;
}
if((currentPage+1)
idx=parseInt(currentPage)+1;
page+=''+idx+'';
pageIdxNum++;
}
while(pageIdxNum<5)//在最后2个标签之前，需要补足不全的页数
{
idx++;
page+=''+idx+'';
pageIdxNum++;
}
if((currentPage+3)==totalPage){
idx=totalPage-1;
page+=''+idx+'';
}else if((currentPage+3)
page+='···';
}
page+=''+totalPage+'';
}else{
varvar4=1;
while(var4<=totalPage){
page+=''+var4+'';
var4++;
}
}
page+='下一页>';
$("#uipage").html(page);
$.each($("#uipagea"),function(index,element){
$(this).removeClass('current');
varidx1=$(this).text();
if(idx1==currentPage){
$(this).addClass('current');
}
$(this).bind('click',function(){
varidx=$(this).text();
if(idx!='···'){
if($(this).attr('class')=='pre'){
pageIndex=(currentPage-1);
}else if($(this).attr('class')=='next'){
pageIndex=(currentPage+1);
}else{
pageIndex=idx;
}
}else{
if($(this).attr('class')=='more'){
pageIndex=(currentPage+2);
}else{
pageIndex=(currentPage-2);
}
}
queryFunction((pageIndex-1),pageSize);
});
});
if(currentPage==1){
$("#uipagea:eq(0)").off("click");
$("#uipagea:eq(0)").addClass("disable");
};
if(currentPage==totalPage || totalPage ==0){
$("#uipagea:last").off("click")
$("#uipagea:last").addClass("disable");
}
}
使用方法如下：
自己需要实现queryFunction（idx,pageNum） 参数1是第几页 参数2是每页展示数量：
demo：
function queryFunction(idx,pageNum){
ajax({
.....略
success:function(data){
。。。数据渲染
pageUtil(currentPage,totalPage,queryFunction);//返回传入当前页，总页数，然后把自己查询这个函数传入进去，即可
。。。数据提取
}
})
}