前端之家收集整理的这篇文章主要介绍了
自己写出个ajax的分页插件,
前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
思路:1 先计算出分页页码 。返回分页页码数组。也就是 如图
2.然后循环变量页码数组 拼接成html元素 并 绑定上事件
/*初始化分页 container容器传jquery对象 pageNow当前第几页 pageSize每页数量 count总数*/
function initPage(container,pageNow,pageSize,count){
container.empty();
var totalPage=0;
if(count%pageSize>0){
totalPage=parseInt((count/pageSize)+1);
}else{
totalPage=parseInt(count/pageSize);
}
var pageSpanArray=makePageNos(pageNow,count,totalPage);
$.each(pageSpanArray,function(index,currData){
if(currData == pageNow){
pageSpan=$("<strong></strong>");
pageSpan.text(pageNow);
container.append(pageSpan);
return;
}
if(currData=="..."){
pageSpan=$("<span></span>");
pageSpan.text(currData);
container.append(pageSpan);
return;
}
pageSpan=$("<a></a>");
pageSpan.text(currData);
pageSpan.on("click",function(e){
e.preventDefault();
goPage(currData);
});
container.append(pageSpan);
});
if(pageNow==1){
initFanye(pageNow,container,"pre",false);
initFanye(pageNow,"next",true);
}
else if(pageNow==totalPage){
initFanye(pageNow,true);
initFanye(pageNow,false);
}
else if (pageNow>1||pageNow<totalPage){
initFanye(pageNow,true);
}
}
function initFanye(pageNow,type,disable){
var html="";
if(type =="pre"&&disable){
html="<a>上一页</a>";
}else if(type =="next"&&disable){
html="<a>下一页</a>";
}else if(type =="pre"&&!disable){
html="<span>上一页</span>";
}else if(type =="next"&&!disable){
html="<span>下一页</span>";
}
pageSpan=$(html);
if(disable){
pageSpan.on("click",function(e){
e.preventDefault();
var goPageNo=1;
if(type =="pre"){
goPageNo=pageNow-1;
}else if(type =="next"){
goPageNo=pageNow+1;
}
goPage(goPageNo);
});
}
container.append(pageSpan);
}
/*计算分页页码 pageNow当前第几页 pageSize每页数量 count总数 totalPage总页数 最后返回分页 页面*/
function makePageNos(pageNow,totalPage){
var pageSpanLength=0;
if(totalPage>6){
if(pageNow<=3||pageNow>=totalPage-2){
pageSpanLength=7;
}else if(pageNow == 4||pageNow == totalPage-3){
pageSpanLength=8;
}else{
pageSpanLength=9;
}
}else{
pageSpanLength=totalPage;
}
var pageSpanArray=new Array(pageSpanLength)
if(totalPage<7){
for( i=0;i<pageSpanLength;i++){
pageSpanArray[i]=i+1;
}
return pageSpanArray;
}
// container.empty();
for( i=0;i<pageSpanLength;i++){
if(i==0){
pageSpanArray[i]="1"
continue;
}
if(i==pageSpanLength-1){
pageSpanArray[i]=totalPage;
continue;
}
if((pageSpanLength==9)&&(i==pageSpanLength-2||i==1)){
pageSpanArray[i]="...";
continue;
}
if((pageNow<=4&&i==pageSpanLength-2)||(pageNow>=totalPage-3&&i==1)){
pageSpanArray[i]="...";
continue;
}
if(pageNow<=4){
pageSpanArray[i]=(i+1);
continue;
}
if(pageNow>=totalPage-3){
pageSpanArray[i]=(totalPage-pageSpanLength+i+1);
continue;
}
if(i<parseInt(pageSpanLength/2))
pageSpanArray[i]=(pageNow-(parseInt(pageSpanLength/2)-i));
else
pageSpanArray[i]=(pageNow+(i-parseInt(pageSpanLength/2)));
}
return pageSpanArray;
}
原文链接:https://www.f2er.com/ajax/164727.html