function generatePagination(pagination, total, pageSize, pageIndex, cd) { /* 需要一个标签 total; // 总数据的数量 pageSize; // 一页显示数量 pageIndex; // 当前页 */ let totalPage = Math.ceil(total / pageSize) || 1; // 总页数 function initPagination() { let pageHtml; // 按钮内容 let prevButton = `
  • `; // 向左 let nextButton = `
  • `; // 向右 let firstPage = `
  • 1
  • `; // 第一页 let lastPage = `
  • ${totalPage}
  • `; // 最后一页 let leftOmitPage = `
  • ...
  • `; // 省略号 let rightOmitPage = `
  • ...
  • `; // 省略号 let pageTips = `
    共 ${total} 条
    `; pageHtml = prevButton; // 添加向左的按钮 /* 生成页数 */ if (totalPage <= 6) { // 总页数小于等于10页全部显示 for (let i = 1; i <= totalPage; i++) { pageHtml += `
  • ${i}
  • `; } } //页码大于5页的情况 当前页大于5的话,并且页码是大于11页的 else if (pageIndex <= 4) { //总页数大于10且当前页远离总页数 for (let i = 1; i <= 5; i++) { pageHtml += `
  • ${i}
  • `; } 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 += `
  • ${i}
  • `; } } else { //除开上面两个情况 当前页在中间 pageHtml += firstPage; pageHtml += leftOmitPage; for (let i = pageIndex - 1; i <= pageIndex + 1; i++) { pageHtml += `
  • ${i}
  • `; } 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 }