JS模仿百度分页条，实现前5后4的效果

向右看齐 2023-07-03 03:25 27阅读 0赞

#### 1、前五后四介绍 ####

先来看一下百度分页条：

*  当前页码为6时如下图：  
    ![在这里插入图片描述][20200201174543874.png]
 *  那么假如当前页码为10呢？如下图：  
    ![在这里插入图片描述][20200201174849712.png]  
    你会发现，一样的，前面还是5，后面还是4，称这种效果为前5后4。当然，在特殊情况下，是不会有前5后4的效果的，例如：  
    ①浏览第1，2，3，4，5页时；  
    ![在这里插入图片描述][20200201175804379.png]  
    ② 浏览倒数第1，2，3，4页时。（这里不上图了，想象一下就OK）  
    写代码时，需要考虑到这两种情况。

#### 2、代码 ####

**变量说明：**

*  totalPage：后台返回来的数据，总页数
 *  currentPage：后台返回来的数据，当前页码
 *  beginNum：分页条的第一个数（如下图）
 *  endNum：分页条的最后一个数（如下图）  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0RlZXBfcm9vdGVk_size_16_color_FFFFFF_t_70]

1.  给beginNum和endNum赋值的代码如下

var beginNum;//分页条第一个数字
                    var endNum;//分页条最后一个数字
                    if(totalPage<10)//如果总页数小于10页
                    {
        
                        beginNum=1;
                        endNum=totalPage;
                    }
                    else//如果总页数大于等于10页
                    {
        
                        beginNum=currentPage-5;
                        endNum=currentPage+4;
                        if(beginNum<1)//currentPage-5可能会是一个小于等于0的数，也就是用户在浏览1,2,3,4,5页时的情况
                        {
        
                            beginNum=1;//纠正回来
                            endNum=beginNum+9;
                        }
                        if(endNum>totalPage)//用户在浏览倒数1,2,3,4页时的情况
                        {
        
                            endNum=totalPage;//纠正回来，让分页条最后一个数字为总的页数
                            beginNum=endNum-9;
                        }
    
                    }

1.  拿到了beginNum和endNum之后，就要用for循环遍历，生成分页条中间的内容。

for(var i=beginNum;i<=endNum;i++)
    {
        
          if(i==currentPage)
          {
        
              var item=' <li class="active" οnclick="findByPage('+i+',5);"><a href="#">'+i+'</a></li>';
          }
         else
         {
        
             var item=' <li οnclick="findByPage('+i+',5);"><a href="#">'+i+'</a></li>';
         }
         str=str+item;
     }

代码解释：  
上面的代码就是生成分页条中间的内容，如下图（我自己做的分页条）：  
![我自己做的分页条][20200201181348776.png]  
if else语句就是判断数字是不是当前页码，如果是的话，就改变样式。就比如上图中的7，是当前页码，样式颜色就变成深蓝色了。  
str=str+item;就是拼接字符串，str代表了整个分页栏的字符串，有了str，后面就可以用  
$("\#fenyelan").html(str);//初始化分页栏  
来生成整个分页栏了。

[20200201174543874.png]: https://img-blog.csdnimg.cn/20200201174543874.png
[20200201174849712.png]: https://img-blog.csdnimg.cn/20200201174849712.png
[20200201175804379.png]: https://img-blog.csdnimg.cn/20200201175804379.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0RlZXBfcm9vdGVk_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200201180611335.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0RlZXBfcm9vdGVk,size_16,color_FFFFFF,t_70
[20200201181348776.png]: https://img-blog.csdnimg.cn/20200201181348776.png