用原生js实现简单的分页

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

What ：

上图吧：

这里写图片描述

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

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

How：

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

部分功能解析

第一个功能的实现：

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很好玩。

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