通过分页查询得到的分页码:

可见如果页数太多,分页工具条将占用太多空间
参照百度:

经过测试百度分页条:
发现如下特点

  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>"
       }
 }

结果展示: