原生js实现分页的效果

朱雀 2022-05-29 05:55 326阅读 0赞

想必大家都用过百度查找过我们想要的信息，每次我们查找东西的时候，百度都会返给我们很多很多相似和有关的结果，而这些结果是不可能一页就显示完全的，一般都会分很多很多页，效果图如下。所以我们今天就是要分享一下，这个分页效果是怎么实现的。

![百度分页图][1348536176362.jpg]

首先我们观察这个分页

1.  一页中显示的页码数是固定的
2.  当当期页码大于等于2的时候，开始显示‘上一页’按钮，当总页数比当前显示的页码大于等于1的时候，开始显示'下一页'按钮的按钮
3.  如果我们想要添加‘首页’和‘尾页’按钮的话，那当首页不能在页面显示的时候，添加‘首页’按钮。如果尾页不能显示在页面的时候添加‘尾页’按钮。
4.  上面的情况确定之后，就是要进行细分的了，分情况进行讨论。首先我们分两大种情况：当页面显示的页数大于等于总页数的时候以及当页面显示的页数小于总页数的时候两种情况。前一种情况比较简单，就不再细说了，主要是当总页数比页面能显示的页数大的时候还要分三种情况：1、当前页的页码小于等于页面中能显示页数的二分之一时2、当前页为最后的几页的时候，以及除了上面两种情况的其他的情况。

文字描述可能有点难懂，所以接下来我们直接上例子，js中有详细的注释方便理解（首先说明，页面中显示的页数为5，至于有多少页如果在实际项目中应该是通过ajax动态获取数据的，然后根据数据的多少自动获得总页数。为了方便理解这里我是用的模拟数据）

HTML代码：

注释的部分是我们要通过js动态添加的。

CSS代码：

js代码：

var json = {
            title : [
                '效果1',
                '效果2',
                '效果3',
                '效果4',
                '效果5',
                '效果6',
                '效果7',
                '效果8',
                '效果9',
                '效果10',
                '效果11',
                '效果12',
                '效果13',
                '效果14',
                '效果15',
                '效果16',
                '效果17',
                '效果18',
                '效果19',
                '效果20',
                '效果21',
                '效果22',
                '效果23',
                '效果24',
                '效果25',
                '效果26',
                '效果27',
                '效果28',
                '效果29',
                '效果30',
                '效果31',
                '效果32',
                '效果33',
                '效果34',
                '效果35',
                '效果36',
                '效果37',
                '效果38',
                '效果39',
                '效果40',
                '效果41',
                '效果42',
                '效果43',
                '效果44',
                '效果45',
                '效果46',
                '效果47',
                '效果48',
                '效果49',
                '效果50',
                '效果51'
            ]
        };

[1348536176362.jpg]: /images/20220529/d3289ee35b634a658ea34f92a080dfcf.png