表格数据太多，需要做成分页。因此需要写一个页码器。
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()
}
