六、js创建页码器：分页、上一页下一页、省略页码

表格数据太多，需要做成分页。因此需要写一个页码器。

1，初始化页码

获取数据之后渲染页码器，页码器初始化，小于6页的全部展示，否则展示前四页，后面是省略号，最后展示尾页。默认选中第一页，禁用前一页的箭头

function setPage(pageCount = 8, rowCount = 387, 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';
}

2，切换页码，在初始化后为页码绑定点击事件：

// 绑定页码点击事件
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'
}

3，初始化之后的页码器中存在省略号，点击省略号往后展示一页，前面出现省略号（保留首页），直到往后展示到倒数第二页：

// 页码器之间往后翻页
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)
    }
}

4，点击首页后的省略号往前展示一页，往后缩减一页，直到往前展示到第二页：

// 页码器之间往前翻页
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);
    }
}

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

bindMoreIconEvent(numberDomLists, pageCount, docModule, callback);

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

bindPagerEvent(numberDomLists, callback);

7，点击前一页、下一页：

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

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

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

通过自定义属性查找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()

8，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>

 

    // 初始化页码
    function initPage() {
        setPage(pageCount, rowCount, 'sqlscript-container', function (newPageObj) {
            receivePageCallBack(newPageObj);
        })
    }

 

// 页码器回调
    function receivePageCallBack(newPageObj) {
        currentPage = newPageObj.newPage;
        if (!newPageObj.flag) {
            document.getElementsByClassName('btn-prev')[0].removeAttribute('disabled');
            document.getElementsByClassName('btn-next')[0].removeAttribute('disabled');
            if (currentPage == pageCount) {
                selectLastPage(pageCount, 'sqlscript-container', function (newPageObj2) {
                    receivePageCallBack(newPageObj2);
                })
            } else if (currentPage == 1) {
                initPage();
            }
            getRunData()
            console.log(currentPage)
        } else {
            let numberDomLists = document.getElementsByClassName('number');
            numberDomLists[numberDomLists.length - 2].onclick()
        }
    }

 

    // 页码器跳转
    function handlePageChange(val) {
        let numberDomLists = document.getElementsByClassName('number');
        if (val === 'prev') {
            currentPage--;
            if (currentPage > 1) {
                if (numberDomLists[1].innerText > currentPage) {
                    linkPrevPage(
                        document.getElementsByClassName('btn-quickprev')[0],
                        numberDomLists,
                        pageCount,
                        document.getElementsByClassName('sqlscript-container')[0],
                        function (newPageObj) {
                            receivePageCallBack(newPageObj);
                        })
                }
            }
        } else if (val === 'next') {
            currentPage++;
            if (currentPage < pageCount) {
                if (numberDomLists[numberDomLists.length - 2].innerText < currentPage) {
                    linkNextPage(
                        document.getElementsByClassName('btn-quicknext')[0],
                        numberDomLists,
                        pageCount,
                        document.getElementsByClassName('sqlscript-container')[0],
                        function (newPageObj) {
                            receivePageCallBack(newPageObj);
                        })
                }
            }
        }
        let targetPage = getElementsByAttr('sqlscript-container', 'number', 'key', currentPage);
        targetPage[0] && targetPage[0].onclick()
    }