通过分页查询得到的分页码:
可见如果页数太多,分页工具条将占用太多空间
参照百度:
经过测试百度分页条:
发现如下特点:
- 总共显示10个页面
- 左边显示5个,右边显示4个,若左边显示>5,则右边显示+1,以此来保证左5右4,反之一样。
- 如果前边不够5个,后边补齐10个
- 如果后边不足4个,前边补齐10个
代码实现如下:
var begin,end; //定义开始和结束位置
//总页数不够10个
if(pb.totalPage < 10){
begin = 1;
end = pb.totalPage; //总页数
}else{//超过10个
begin = pb.currentPage - 5 ; //当前页数-5
end = pb.currentPage + 4 ;//当前页数+4
//如果前边不够5个,后面补齐10个
if(begin < 1){
begin = 1;
end = begin + 9;
}
//如果后边不足4个,前边补齐10个
if(end > pb.totalPage< 1){
begin = end-9;
end = pb.totalPage;
}
}
//遍历生成页码
for (var i = begin; i <= end; i++){
if(pb.currentPage == i){
li += "<li class='curPage' onclick='load("+cid+","+i+")'><a href='javascript:void(0)'>"+i+"</a></li>"
}else{
li += "<li onclick='load("+cid+","+i+")'><a href='javascript:void(0)'>"+i+"</a></li>"
}
}
结果展示: