141 lines
4.7 KiB
JavaScript
141 lines
4.7 KiB
JavaScript
function generatePagination(pagination, total, pageSize, pageIndex, cd) {
|
||
|
||
/*
|
||
需要一个<ul id="pagination"></ul>标签
|
||
total; // 总数据的数量
|
||
pageSize; // 一页显示数量
|
||
pageIndex; // 当前页
|
||
*/
|
||
let totalPage = Math.ceil(total / pageSize) || 1; // 总页数
|
||
function initPagination() {
|
||
let pageHtml; // 按钮内容
|
||
let prevButton = `<li class='list-items lbl btnPrev'>‹</li>`; // 向左
|
||
let nextButton = `<li class='list-items lbr btnNext'>›</li>`; // 向右
|
||
let firstPage = `<li class='list-items' pagenumber=1>1</li>`; // 第一页
|
||
let lastPage = `<li class='list-items' pagenumber=${totalPage}>${totalPage}</li>`; // 最后一页
|
||
let leftOmitPage = `<li class='list-items btnGoLeft'>...</li>`; // 省略号
|
||
let rightOmitPage = `<li class='list-items btnGoRight'>...</li>`; // 省略号
|
||
let pageTips = `<div style='line-height:20px;' class='pageTips'>共 ${total} 条</div > `;
|
||
pageHtml = prevButton; // 添加向左的按钮
|
||
|
||
/* 生成页数 */
|
||
if (totalPage <= 6) {
|
||
// 总页数小于等于10页全部显示
|
||
for (let i = 1; i <= totalPage; i++) {
|
||
pageHtml += `<li class='list-items' pagenumber=${i}>${i}</li>`;
|
||
}
|
||
}
|
||
|
||
//页码大于5页的情况 当前页大于5的话，并且页码是大于11页的
|
||
else if (pageIndex <= 4) {
|
||
//总页数大于10且当前页远离总页数
|
||
for (let i = 1; i <= 5; i++) {
|
||
pageHtml += `<li class='list-items' pagenumber=${i}>${i}</li>`;
|
||
}
|
||
pageHtml += rightOmitPage;
|
||
pageHtml += lastPage;
|
||
} else if (pageIndex > totalPage - 3) {
|
||
//pageindex>=9 的时候并且页数》10页的时候
|
||
|
||
// console.log('totalPage - 2:' + (totalPage - 3));
|
||
// console.log('pageindex:' + pageIndex);
|
||
//总页数大于10且当前页接近总页数
|
||
pageHtml += firstPage;
|
||
pageHtml += leftOmitPage;
|
||
for (let i = totalPage - 4; i <= totalPage; i++) {
|
||
pageHtml += `<li class='list-items' pagenumber=${i}>${i}</li>`;
|
||
}
|
||
} else {
|
||
//除开上面两个情况 当前页在中间
|
||
pageHtml += firstPage;
|
||
pageHtml += leftOmitPage;
|
||
for (let i = pageIndex - 1; i <= pageIndex + 1; i++) {
|
||
pageHtml += `<li class='list-items' pagenumber=${i}>${i}</li>`;
|
||
}
|
||
pageHtml += rightOmitPage;
|
||
pageHtml += lastPage;
|
||
}
|
||
pageHtml += nextButton; // 添加向右的按钮
|
||
pageHtml += pageTips;
|
||
pagination.innerHTML = pageHtml;
|
||
pagination
|
||
.querySelector("li[pagenumber='" + pageIndex + "']")
|
||
.classList.add('active');
|
||
|
||
let pagenumberBtns = pagination.querySelectorAll('li[pagenumber]'); // 获取所有的页码按钮
|
||
|
||
/* 点击页码按钮进行翻页 */
|
||
pagenumberBtns.forEach(function (elements) {
|
||
elements.onclick = function () {
|
||
pageIndex = Number(this.innerHTML); // 当前页
|
||
pagination
|
||
.querySelector("li[pagenumber='" + pageIndex + "']")
|
||
.classList.add('active');
|
||
pageHtml = ``;
|
||
initPagination()
|
||
cd && cd(pageIndex)
|
||
};
|
||
});
|
||
|
||
/* 向左翻页 */
|
||
pagination.getElementsByClassName('btnPrev')[0].addEventListener('click', function () {
|
||
if (pageIndex > 1) {
|
||
pageIndex--;
|
||
pageHtml = '';
|
||
initPagination();
|
||
cd && cd(pageIndex)
|
||
}
|
||
});
|
||
|
||
/* 向右翻页 */
|
||
pagination.getElementsByClassName('btnNext')[0].addEventListener('click', function () {
|
||
if (pageIndex < totalPage) {
|
||
pageIndex++;
|
||
pageHtml = '';
|
||
initPagination()
|
||
cd && cd(pageIndex)
|
||
}
|
||
});
|
||
|
||
/* 向左快速翻页 */
|
||
let btnGoLeft = pagination.getElementsByClassName('btnGoLeft')[0];
|
||
if (btnGoLeft) {
|
||
btnGoLeft.addEventListener('mouseenter', function () {
|
||
this.innerHTML = '<';
|
||
});
|
||
btnGoLeft.addEventListener('mouseleave', function () {
|
||
this.innerHTML = '...';
|
||
});
|
||
btnGoLeft.addEventListener('click', function () {
|
||
if (pageIndex > 10) {
|
||
pageIndex -= 10;
|
||
pageHtml = '';
|
||
initPagination();
|
||
cd && cd(pageIndex)
|
||
}
|
||
});
|
||
}
|
||
|
||
/* 向右快速翻页 */
|
||
let btnGoRight = pagination.getElementsByClassName('btnGoRight')[0];
|
||
if (btnGoRight) {
|
||
btnGoRight.addEventListener('mouseenter', function () {
|
||
this.innerHTML = '>';
|
||
});
|
||
btnGoRight.addEventListener('mouseleave', function () {
|
||
this.innerHTML = '...';
|
||
});
|
||
btnGoRight.addEventListener('click', function () {
|
||
if (pageIndex < totalPage - 10) {
|
||
pageIndex += 10;
|
||
pageHtml = '';
|
||
initPagination();
|
||
cd && cd(pageIndex)
|
||
}
|
||
});
|
||
}
|
||
}
|
||
initPagination();
|
||
}
|
||
|
||
export { generatePagination } |