用原生js实现简单的分页

男娘i 2022-05-24 02:52 217阅读 0赞

用原生js实现的一个简单的分页插件。

## What ： ##

上图吧：

![这里写图片描述][70]

em…没错，它就是长这样。类似于各种页面搜索结果页的底部部分。

1.  总共分为两个部分，一个分页展示部分，一个查询部分。
2.  分页展示部分可划分为`上一页，下一页`导航操作部分和`页面1，2，3`直接操作部分。
3.  查询部分就是我们只需要输入所要查询的页面数字，即实现跳转到指定页面。

## How： ##

1.  主要实现的是，当我们要切换到某个页码时，这时，页码对应的整个分页组件的状态是确定的。
2.  接下来实现的是，在出现很多个页面时，我们只能让一部分显示，另一部分用`...`符号占位显示。如果页码总数小于页面要显示分页码数时，就不需要省略符号占位。
3.  最后我们实现，搜索页码进行页面的跳转。

### 部分功能解析 ###

--------------------

第一个功能的实现：  
  
1. 用 `gotoPage`方法，页码数与整个页面是绑定的，当我们点击相应的页码时，就会实现页面跳转。我们给定一个触发切换页面的事件和页面切换调用函数，当检测到页码的 `state`发生变化时，触发页面切换事件，这时，调用页面切换函数即可。  
2. 页面切换的方式有三种，点击上（下）一页，点击页码和进行搜索切换。  
3. 选择上（下）页进行切换的时候，我们需要进行一定的判断

//当前页已经是第一页，则禁止上一页按钮的可用性
            state.pageNumber > 1
                ? (this.hasClass(prevBtn, state.disbalePrevCName) && this.removeClass(prevBtn, state.disbalePrevCName))
                : (!this.hasClass(prevBtn, state.disbalePrevCName) && this.addClass(prevBtn, state.disbalePrevCName));
      //当前已经是最后一页，则禁止下一页按钮的可用性
            state.pageNumber >= state.totalPageCount
                ? (!this.hasClass(nextBtn, state.disbaleNextCName) && this.addClass(nextBtn, state.disbaleNextCName))
                : (!this.hasClass(nextBtn, state.disbaleNextCName) && this.removeClass(nextBtn, state.disbaleNextCName));

4 . 点击页码进行跳转的时候，很简单的直接跳转。  
5. 另外一种就是利用搜索操作，输入页码数，实现跳转。

document.getElementById('page-go').addEventListener('submit', e => {
            e.preventDefault();
            pagePagination.gotoPage(+document.getElementById('page-num').value)
        })

--------------------

第二个功能的实现：用 `...`占位符进行页码数的替换，以保证页面的美观性。

首先我们必须设定最大页面的展示数。

state.maxShowBtnCount = paramsObj.maxShowBtnCount || 5;

通过计算确定我们需要判断页码数和占位符位置。

let rEllipseSign = state.totalPageCount - (state.maxShowBtnCount - state.activePosition) - 1;

1. 左侧不需要占位符\`…\`;

if (pageNumber <= state.maxShowBtnCount && (pageNumber < rEllipseSign)) {
                    if (+evaNumberLi[1].getAttribute(state.dataNumberAttr) > 2) {
                        for (let i = 1; i < state.maxShowBtnCount + 1; i++) {
                            evaNumberLi[i].innerText = i + 1;
                            evaNumberLi[i].setAttribute(state.dataNumberAttr, i + 1);
                        }
                    }
    
                    this.hiddenEllipse('.ellipsis-head');
                    this.hiddenEllipse('.ellipsis-tail', false);
                    this.addClass(evaNumberLi[pageNumber - 1], state.activeCName)
    
                }

2.右侧不用占位符`...`;

if (pageNumber >= rEllipseSign) {
                    this.hiddenEllipse('.ellipsis-tail');
                    this.hiddenEllipse('.ellipsis-head', false);
                    if (+evaNumberLi[len - 2].getAttribute(state.dataNumberAttr) < state.totalPageCount - 1) {
                        for (let i = 1; i < state.maxShowBtnCount + 1; i++) {
                            evaNumberLi[i].innerText = state.totalPageCount - (state.maxShowBtnCount - i) - 1;
                            evaNumberLi[i].setAttribute(state.dataNumberAttr, state.totalPageCount - (state.maxShowBtnCount - i) - 1)
                        }
                    }
                    this.addClass(evaNumberLi[(state.maxShowBtnCount + 1) - (state.totalPageCount - pageNumber)], state.activeCName);
                }

3.左右两侧都要用占位符`...`;

if (pageNumber > state.maxShowBtnCount && pageNumber < rEllipseSign) {
                    pageNumber === 2 && state.maxShowBtnCount === 1
                        ? this.hiddenEllipse('.ellipsis-head')
                        : this.hiddenEllipse('.ellipsis-head', false);
                    this.hiddenEllipse('.ellipsis-tail', false);
                    for (let i = 1; i < state.maxShowBtnCount + 1; i++) {
                        evaNumberLi[i].innerText = pageNumber + (i - state.activePosition);
                        evaNumberLi[i].setAttribute(state.dataNumberAttr, pageNumber + (i - state.activePosition))
                    }
                    this.addClass(evaNumberLi[state.activePosition], state.activeCName)
                }

4.不需要占位符的情况；（这种就是很简单的总页码数小于等于我们设定的最大页码展示数）直接给其添加`active`样式即可。

this.addClass(evaNumberLi[pageNumber - 1], state.activeCName)

--------------------

###### 最后就是也面的渲染，我们需要确定输入的页码总数，一些元素的属性。之后用字符串的形式将其进行拼接即可。   代码上传至[GitHub][]. ######

这样就基本完成，无论看不看得懂，敲一遍也就懂了。

最后的使用：

//我们在页面原文调用init函数，并且输入相应的页码数和页码展示最大数。
    const pagePagination = new SimplePagination(15);
        pagePagination.init({
            container: '.box',
            maxShowBtnCount: 6,
            onPageChange: state => {
                console.log('pagination change:', state.pageNumber);
            }
        });

最后就是一些样式的添加。随便加吧，总觉得css很好玩。

[参考原文][Link 1]写的超棒的，大家也可以看一下。

[70]: /images/20220524/ec4f2d759f224fcb9e554a9ba39b3e0f.png
[GitHub]: https://github.com/weiqiujuan/js-demos/tree/master/pagination
[Link 1]: https://blog.csdn.net/deeplies/article/details/78949342