javascript写一个页码器，包括切换页码、分页、上一页/下一页、省略页码等功能

当表格数据太多时，通常需要做成分页。由于项目要求，使用原生js实现一个页码器，满足常规要求：切换页码、分页、上一页/下一页、页码超出时显示省略号，点击省略号往前/后显示几个隐藏的页码，附上下载资源链接：https://download.csdn.net/download/sxww_zyt/87485457

---

一、初始化页码

        获取数据之后渲染页码器，页码器初始化，小于6页的展示全部页码，否则展示前四页，后面是省略号，最后展示尾页（例如：< 1 2 3 4 ... 8 >）。

        默认选中第一页，禁用前一页的箭头。

         代码如下：

function setPage(pageCount = 1, rowCount = 0, rootClassName, callback) {
    currentPage = 1;
    let docModule = document.getElementsByClassName(rootClassName)[0];
    let numberDomLists = docModule.getElementsByClassName('number');
    docModule.getElementsByClassName('el-pager')[0].innerHTML = ''
    docModule.getElementsByClassName('el-pagination__total')[0].innerText = '共 ' + rowCount + ' 条数据';
    if (pageCount < 6) {
        for (let i = 1; i <= pageCount; i++) {
            let elem = document.createElement('li');
            elem.className = 'number';
            elem.innerText = i;
            elem.setAttribute('key', i)
            docModule.getElementsByClassName('el-pager')[0].appendChild(elem)
        }
    } else {
        for (let i = 1; i <= 4; i++) {
            let elem = document.createElement('li');
            elem.className = 'number';
            elem.innerText = i;
            elem.setAttribute('key', i)
            docModule.getElementsByClassName('el-pager')[0].appendChild(elem)
        }
        let elemMore = document.createElement('li');
        elemMore.className = 'el-icon more btn-quicknext el-icon-more';
        elemMore.setAttribute('key', '')
        docModule.getElementsByClassName('el-pager')[0].appendChild(elemMore);
        let elemLast = document.createElement('li');
        elemLast.className = 'number';
        elemLast.innerText = pageCount;
        elemLast.setAttribute('key', pageCount)
        docModule.getElementsByClassName('el-pager')[0].appendChild(elemLast)
    }
    numberDomLists[currentPage - 1].className = 'number active';
    docModule.getElementsByClassName('btn-prev')[0].disabled = 'true';
}

二、切换页码

        在初始化后为页码绑定点击事件，用于修改页码的样式，高亮当前选中页码，返回当前选择的页码是几（callback）。

         代码如下：

// 绑定页码点击事件
function bindPagerEvent(numberDomLists, callback) {
    for (let i = 0; i < numberDomLists.length; i++) {
        numberDomLists[i].onclick = function () {
            setPageActive(this, numberDomLists);
            callback({
                newPage: numberDomLists[i].innerText
            })
        }
    }
}
// 页码点击事件
function setPageActive(obj, numberDomLists) {
    for (let i = 0; i < numberDomLists.length; i++) {
        numberDomLists[i].className = 'number';
    }
    obj.className = 'number active'
}

三、省略号

        初始化之后的页码器中存在省略号

        如果省略号在后面，点击之后保留第一页，第一页后面出现省略号，页码往后展示一页，直到展示倒数第二页

        代码如下：

// 页码器之间往后翻页
function bindMoreIconEvent(numberDomLists, pageCount, docModule, callback) {
    let quicknextElem = docModule.getElementsByClassName('btn-quicknext')[0];
    if (quicknextElem) {
        quicknextElem.onclick = function () {
            linkNextPage(this, numberDomLists, pageCount, docModule, callback);
        }
    }
}
// 往后翻页
function linkNextPage(obj, numberDomLists, pageCount, docModule, callback) {
    // 如果第二个数字是2，改为...并移除3，增加5，否则，移除dom
    let secondPage = numberDomLists[1];
    if (secondPage.innerText == 2) {
        secondPage.className = 'el-icon more btn-quickprev el-icon-more';
        secondPage.innerText = '';
        secondPage.setAttribute('key', '')
        bindPreIconEvent(numberDomLists, pageCount, docModule, callback);
        docModule.getElementsByClassName('el-pager')[0].removeChild(numberDomLists[1]);
    } else {
        docModule.getElementsByClassName('el-pager')[0].removeChild(secondPage);
    }
    // 如果倒数第二个数字比总页数少2，改为总页数-1，否则在前面追加dom
    if (obj.previousElementSibling.innerText < pageCount - 2) {
        let elem = document.createElement('li');
        elem.className = 'number';
        elem.innerText = Number(obj.previousElementSibling.innerText) + 1;
        elem.setAttribute('key', Number(obj.previousElementSibling.innerText) + 1)
        docModule.getElementsByClassName('el-pager')[0].insertBefore(elem, obj);
    } else {
        obj.className = 'number';
        obj.innerText = pageCount - 1;
        obj.setAttribute('key', pageCount - 1)
    }
}

        如果省略号在前面（紧跟在第一页后），点击之后往前展示一页，往后缩减一页，直到往前展示到第二页

         代码如下：

// 页码器之间往前翻页
function bindPreIconEvent(numberDomLists, pageCount, docModule, callback) {
    let quickprevElem = docModule.getElementsByClassName('btn-quickprev')[0];
    if (quickprevElem) {
        quickprevElem.onclick = function () {
            linkPrevPage(this, numberDomLists, pageCount, docModule, callback);
        }
    }
}
// 往前翻页
function linkPrevPage(obj, numberDomLists, pageCount, docModule, callback) {
    // 如果第二个数字是4，改为2
    if (obj.nextElementSibling.innerText == 4) {
        obj.className = 'number';
        obj.innerText = '2';
        obj.setAttribute('key', '2')
    }
    // 大于等于4 obj后追加一个dom
    let elem = document.createElement('li');
    elem.className = 'number';
    elem.innerText = Number(obj.nextElementSibling.innerText) - 1;
    elem.setAttribute('key', Number(obj.nextElementSibling.innerText) - 1);
    docModule.getElementsByClassName('el-pager')[0].insertBefore(elem, obj.nextElementSibling);

    // 如果倒数第二个数字是总数-1，改为...，否则移除dom
    let len = numberDomLists.length;
    let lastSecondPage = numberDomLists[len - 2];
    if (lastSecondPage.innerText == pageCount - 1) {
        lastSecondPage.className = 'el-icon more btn-quicknext el-icon-more';
        lastSecondPage.innerText = '';
        lastSecondPage.setAttribute('key', '')
        bindMoreIconEvent(numberDomLists, pageCount, docModule, callback);
    } else {
        docModule.getElementsByClassName('el-pager')[0].removeChild(lastSecondPage);
    }
}

四、绑定省略号的点击事件

        如果初始化的时候就出现了省略号，那么需要在初始化的时候就绑定省略号的点击事件

bindMoreIconEvent(numberDomLists, pageCount, docModule, callback);

五、及时为页码绑定点击事件

        由于页码器一直在变化，但操作者对页码的点击事件随时可能发生，所以每次页码器变动之后都需要重新为页码绑定点击事件：

bindPagerEvent(numberDomLists, callback);

六、点击上一页、下一页：

        当点击前一页，当前页码自减一，如果页码器的第二个数字比当前页大，往前翻一页，后面的页码器缩减一页，相当于点击首页后面代表往前翻页的省略号；

        同理，当点击下一页，相当于往后翻页；

        如果往前翻页或者往后翻页中没有省略号，表示指定页码已经在当前页面中展示，直接触发点击事件，选中该页。

        通过自定义属性查找dom：

// 通过自定义属性查找dom
function getElementsByAttr(rootClassName, className, attr, value) {
    let docModule = document.getElementsByClassName(rootClassName)[0];
    let classList = docModule.getElementsByClassName(className);
    let doms = [];
    for (let i = 0; i < classList.length; i++) {
        if (classList[i].getAttribute(attr) == value) {
            doms.push(classList[i])
        }
    }
    return doms;
}

        选中页码：

let targetPage = getElementsByAttr('sqlscript-container', 'number', 'key', currentPage);
targetPage[0] && targetPage[0].onclick()

七、page.js使用：

  <div role="pagination" aria-label="pagination" class="el-pagination pagination hort-box" data-v-b770da44="">
    <span class="el-pagination__total"></span>
    <button type="button" class="btn-prev" onclick="handlePageChange('prev')">
      <i class="el-icon el-icon-arrow-left"></i>
    </button>
    <ul class="el-pager"></ul>
    <button type="button" class="btn-next" onclick="handlePageChange('next')">
      <i class="el-icon el-icon-arrow-right"></i>
    </button>
  </div>

总结

        本篇使用javascript实现一个包含常规操作的分页页码器。可通过https://download.csdn.net/download/sxww_zyt/87485457下载资源查看效果。欢迎斧正！