优化分页工具条展示分页码

通过分页查询得到的分页码:
在这里插入图片描述
可见如果页数太多,分页工具条将占用太多空间
参照百度:
在这里插入图片描述
经过测试百度分页条:
发现如下特点

  1. 总共显示10个页面
  2. 左边显示5个,右边显示4个,若左边显示>5,则右边显示+1,以此来保证左5右4,反之一样。
  3. 如果前边不够5个,后边补齐10个
  4. 如果后边不足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>"
       }
 }

结果展示:
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值