近期需要做一個(gè)平臺幕随，需要用到分頁，
原型以及前端給的頁面是純html實(shí)現(xiàn)的宿接，沒有用到分頁插件赘淮，于是就自己參照京東商品頁的那種方式寫了一個(gè)。1期先寫死了 最多展示7個(gè)頁簽澄阳。后期考慮制作可定制化的拥知。
源碼如下：
vardefaultIndex=0;
varpageIndex=0;
varpageSize=20;
/*參數(shù)1：當(dāng)前頁,參數(shù)2：總頁數(shù),參數(shù)3：綁定查詢函數(shù)，需要自定義實(shí)現(xiàn)碎赢，會傳入查詢頁數(shù)和每頁查詢數(shù)*/
functionpageUtil(currentPage,totalPage,queryFunction){
varidx=0;
varpageIdxNum=0;//擁擠統(tǒng)計(jì)當(dāng)前有幾個(gè)頁面標(biāo)簽低剔，如果不足會補(bǔ)齊
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個(gè)標(biāo)簽之前，需要補(bǔ)足不全的頁數(shù)
{
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");
}
}
使用方法如下：
自己需要實(shí)現(xiàn)queryFunction（idx,pageNum） ?參數(shù)1是第幾頁 ?參數(shù)2是每頁展示數(shù)量：
demo：
function ?queryFunction(idx,pageNum){
????????ajax({
? ? ? ? .....略
? ? success:function(data){
肮塞。襟齿。。數(shù)據(jù)渲染
? ??pageUtil(currentPage,totalPage,queryFunction);//返回傳入當(dāng)前頁枕赵，總頁數(shù)猜欺，然后把自己查詢這個(gè)函數(shù)傳入進(jìn)去，即可
拷窜。开皿。涧黄。數(shù)據(jù)提取
????}
????????})
}
