现象：当点击倒数第二页时，最后一页显示重复，如下图：
image.png

上一篇的逻辑还有问题，现优化如下：

翻页效果

参照上一篇文章或博客园的翻页

逻辑思路

假设：total =100
1.当点击的页数小于或等于7时，让10页以内的都显示出来（i<10），其它用...表示，最后加上total页。
2.当点击的页数大于7时，有两种情况：

  • 一是当前页大于7页并当前页小于总页数total减掉7页，实际就是7页~93页之间的处理。第1页(i == 1)和最后一页显示（i == total），当前页相邻的前5页(paging - 5)和后5页(paging + 5)都显示，其它用…显示
  • 二是当前页大于7页并当前页大于总页数total减掉7页，实际就是94页~100页之间的处理。第1页(i == 1)和当前页相邻的前5页(paging - 5)和当前页到最后一页都显示，其它用…显示

代码

  1. //参照博客园的翻页来实现         paging当前页,total总页数,html要插入的标签
  2. function pagingConstruct(paging,total,html){
  3.     var pagingDivInnerHTML = "";        
  4.     var isHiddenExist = 0;//这里是加载省略号的flag
  5.     //从第1页读到total页。
  6.     for (var i = 1; i <= total; i++) {        
  7.         if (i == paging) {//如果读到当前页加一个active
  8.             pagingDivInnerHTML += "<a class='page_a active' href='javascript:void(0)' >" + i + "</a> ";
  9.         }else {
  10.             //如果当前页小于7
  11.             if(paging <= 7){
  12.                 if(i <10){
  13.                      pagingDivInnerHTML += "<a class='page_a' href='javascript:void(0)' >" + i + "</a> ";
  14.                      isHiddenExist = 0;
  15.                 }else{
  16.                       if(isHiddenExist == 0) {
  17.                         pagingDivInnerHTML += "...";
  18.                         pagingDivInnerHTML += "<a class='page_a' href='javascript:void(0)' >" + total + "</a> ";
  19.                         isHiddenExist = 1;
  20.                    }
  21.                 }
  22.             }else{//如果当前页大于7
  23.                 //当前页大于7小于总页数减7，如总页数是20，那就是8页~23页的处理
  24.                 if(paging <= (+total - 7)){
  25.                     if(i== 1){
  26.                         pagingDivInnerHTML += "<a class='page_a' href='javascript:void(0)' >1</a> ";
  27.                     }
  28.                     if(i <= (+paging + 5) && i >= (+paging - 5)){
  29.                         pagingDivInnerHTML += "<a class='page_a' href='javascript:void(0)' >" + i + "</a> ";
  30.                         isHiddenExist = 0;
  31.                     }else{
  32.                         if(isHiddenExist == 0) {
  33.                             pagingDivInnerHTML += "...";
  34.                             isHiddenExist = 1;
  35.                           }
  36.                     }
  37.                     if(i == total){
  38.                         pagingDivInnerHTML += "<a class='page_a' href='javascript:void(0)' >" + total + "</a> ";
  39.                     }
  40.                 }else if(paging > (+total - 7)){//当前页大于7并且大于总页数减7，如总页数是20，那就是14页~20页的处理
  41.                     if(i== 1){
  42.                         pagingDivInnerHTML += "<a class='page_a' href='javascript:void(0)' >1</a> ";
  43.                     }
  44.                     if(i >= (+paging - 5) && i <= total){
  45.                         pagingDivInnerHTML += "<a class='page_a' href='javascript:void(0)' >" + i + "</a> ";
  46.                         isHiddenExist = 0;
  47.                     }else{
  48.                         if(isHiddenExist == 0) {
  49.                             pagingDivInnerHTML += "...";
  50.                             isHiddenExist = 1;
  51.                           }
  52.                     }
  53.                 }
  54.             }    
  55.         }
  56.     }
  57.     //把构造的内容放上去pagingDiv
  58.     $("#"+html+"").html(pagingDivInnerHTML);
  59. }