html+js列表分页功能封装

封装代码 

 /*** 设置分页* @param totalPage 总页数* @param currentPage 当前页码*/function refreshPages(totalPage = 1, currentPage = 1) {//用id选择器写入页码部分代码if (totalPage > 0) {let paginationInfo = getPagination(totalPage, currentPage);$("#pagination").html(paginationInfo);} else {// 总页数为0时，不展示分页$("#pagination").html("");}}// 渲染分页function getPagination(totalPage, currentPage) {let paginationInfo = "<ul class='pagination pagination-sm'>";// 上一页if (currentPage === 1) {paginationInfo += `<li class='disabled'><a href='javascript:void(0);'>«</a></li>`;} else {paginationInfo += `<li><a href='javascript:void(0);' onclick='refreshPages(${totalPage}, ${currentPage - 1}); searchJob(${currentPage - 1})'>«</a></li>`;}// 中间页码逻辑if (totalPage <= 10) {// 总页数 <= 10：显示全部页码for (let i = 1; i <= totalPage; i++) {paginationInfo += generatePageItem(i, currentPage, totalPage);}} else {// 总页数 > 10：分情况显示if (currentPage <= 3) {// 当前页在前3页for (let i = 1; i <= 4; i++) {paginationInfo += generatePageItem(i, currentPage, totalPage);}paginationInfo += generateEllipsis();paginationInfo += generatePageItem(totalPage, currentPage, totalPage);} else if (currentPage >= totalPage - 2) {// 当前页在最后3页paginationInfo += generatePageItem(1, currentPage, totalPage);paginationInfo += generateEllipsis();for (let i = totalPage - 3; i <= totalPage; i++) {paginationInfo += generatePageItem(i, currentPage, totalPage);}} else {// 当前页在中间paginationInfo += generatePageItem(1, currentPage, totalPage);paginationInfo += generateEllipsis();for (let i = currentPage - 1; i <= currentPage + 1; i++) {paginationInfo += generatePageItem(i, currentPage, totalPage);}paginationInfo += generateEllipsis();paginationInfo += generatePageItem(totalPage, currentPage, totalPage);}}// 下一页if (currentPage === totalPage) {paginationInfo += `<li class='disabled'><a href='javascript:void(0);'>»</a></li>`;} else {paginationInfo += `<li><a href='javascript:void(0);' onclick='refreshPages(${totalPage}, ${currentPage + 1}); searchJob(${currentPage + 1})'>»</a></li>`;}paginationInfo += "</ul>";return paginationInfo;}// 生成一个页码项function generatePageItem(pageNumber, currentPage, totalPage) {const isActive = pageNumber === currentPage;return `<li class="${isActive ? "active" : ""}"><a href='javascript:void(0);' onclick='refreshPages(${totalPage}, ${pageNumber}); searchJob(${pageNumber})'>${pageNumber}</a></li>`;}// 生成省略号function generateEllipsis() {return "<li><a href='javascript:void(0);'>...</a></li>";}

样式

// 分页
.pagination {margin-top: 1.25rem;display: flex;justify-content: center;// 禁止复制-webkit-user-select: none; /* Safari */-moz-user-select: none; /* Firefox */-ms-user-select: none; /* Internet Explorer/Edge */user-select: none; /* 标准语法 */> li {> a,> span {margin: 0 0.1875rem;color: #6c757d;border-color: #dee2e6;height: 2.5rem;width: 2.5rem;display: flex;align-items: center;justify-content: center;text-align: center;border-radius: 0.125rem;background: rgba(244, 244, 245, 1);&:hover,&:focus {background-color: rgba(196, 48, 44, 1);border-color: rgba(196, 48, 44, 1);color: #fff;}}&.pagination-sm {> a,> span {padding: 0;min-width: 1.625rem;line-height: 1.5rem;}}&.pagination-lg {> a,> span {padding: 0;min-width: 2.3125rem;line-height: 2.1875rem;}}&:first-child {a,span {-webkit-border-radius: 0.125rem;border-radius: 0.125rem;}}&:last-child {a,span {border-top-right-radius: 0.125rem;border-bottom-right-radius: 0.125rem;}}}.active {> a,> a:focus,> a:hover,> span,> span:focus,> span:hover {background-color: rgba(196, 48, 44, 1);border-color: rgba(196, 48, 44, 1);color: #fff;}}.disabled {> a,> a:focus,> a:hover,> span,> span:focus,> span:hover {background-color: #f4f4f5;color: #6c757d;cursor: not-allowed;}}.no-border {> li {a,span {border: none;}}}.pagination-circle {> li {a,span {-webkit-border-radius: 50% !important;border-radius: 50% !important;}}}.no-gutters {> li {a,span {margin: 0;margin-left: -0.0625rem;-webkit-border-radius: 0 !important;border-radius: 0 !important;}}}
}

js调用

// 生成分页组件
refreshPages(1, 1);//总页数，当前页数
// 请求分页数据
const searchJob = (page) => {// console.log(page);//page是点击分页的页数appSearch(page);// 这个是请求数据列表的方法
};

在需要展示分页的html的地方添加

 <!-- 分页 -->
<div id="pagination"></div>