分页器组件是前端页面中处理长列表数据的常用功能，通过HTML函数构建分页器可以大幅提升代码的复用性和可维护性，同时实现页码导航的结构化设计能让组件逻辑更清晰，适配不同的业务场景。
分页器组件的核心组成
一个完整的分页器组件通常包含以下几个核心部分：
- 上一页和下一页按钮，用于快速切换相邻页码
- 页码列表，展示当前可选的所有页码
- 省略号标识，当页码过多时隐藏中间部分页码
- 总页数和当前页码的展示，方便用户了解当前浏览位置
HTML函数构建分页器的基础实现
我们可以将分页器的DOM生成逻辑封装到一个HTML函数中，函数接收总页数、当前页码、页码切换回调等参数，返回对应的HTML字符串。
// 分页器HTML生成函数
function createPagination(totalPage, currentPage, onPageChange) {
// 如果总页数小于等于1，不需要展示分页器
if (totalPage <= 1) {
return '';
}
let html = '<div class="pagination">';
// 上一页按钮
html += `<button class="page-btn prev-btn" ${currentPage === 1 ? 'disabled' : ''} data-page="${currentPage - 1}">上一页</button>`;
// 页码列表生成逻辑
const pageList = generatePageList(totalPage, currentPage);
pageList.forEach(page => {
if (page === '...') {
html += '<span class="page-ellipsis">...</span>';
} else {
html += `<button class="page-btn ${page === currentPage ? 'active' : ''}" data-page="${page}">${page}</button>`;
}
});
// 下一页按钮
html += `<button class="page-btn next-btn" ${currentPage === totalPage ? 'disabled' : ''} data-page="${currentPage + 1}">下一页</button>`;
html += '</div>';
// 绑定点击事件
setTimeout(() => {
document.querySelectorAll('.page-btn:not(:disabled)').forEach(btn => {
btn.addEventListener('click', () => {
const page = parseInt(btn.dataset.page);
onPageChange(page);
});
});
}, 0);
return html;
}页码导航的结构化实现逻辑
页码列表的生成需要兼顾展示完整性和页面简洁性，避免页码过多导致分页器过长，这里通过generatePageList函数实现结构化的页码生成逻辑。
// 生成结构化页码列表
function generatePageList(totalPage, currentPage) {
const pageList = [];
// 始终展示第一页
pageList.push(1);
// 计算需要展示的页码范围
let start = Math.max(2, currentPage - 2);
let end = Math.min(totalPage - 1, currentPage + 2);
// 处理前面的省略号
if (start > 2) {
pageList.push('...');
}
// 添加中间页码
for (let i = start; i <= end; i++) {
pageList.push(i);
}
// 处理后面的省略号
if (end < totalPage - 1) {
pageList.push('...');
}
// 始终展示最后一页（如果总页数大于1）
if (totalPage > 1) {
pageList.push(totalPage);
}
return pageList;
}分页器的样式和基础使用
生成的分页器需要配合基础样式才能正常展示，以下是分页器的基础CSS样式，可根据实际需求调整。
.pagination {
display: flex;
align-items: center;
gap: 8px;
justify-content: center;
margin: 20px 0;
}
.page-btn {
padding: 6px 12px;
border: 1px solid #ddd;
background: #fff;
cursor: pointer;
border-radius: 4px;
}
.page-btn.active {
background: #1890ff;
color: #fff;
border-color: #1890ff;
}
.page-btn:disabled {
cursor: not-allowed;
opacity: 0.5;
}
.page-ellipsis {
padding: 0 4px;
}使用时只需要传入对应的参数，将函数返回的HTML插入到页面指定位置即可：
// 使用示例
const container = document.getElementById('pagination-container');
const totalPage = 20;
let currentPage = 1;
// 渲染分页器
function renderPagination() {
container.innerHTML = createPagination(totalPage, currentPage, (page) => {
currentPage = page;
renderPagination();
// 这里可以触发列表数据重新加载的逻辑
console.log('切换到第', page, '页');
});
}
renderPagination();注意事项
在实际使用中需要注意几个问题：
- 如果总页数较少，比如小于等于7页，可以省略省略号，直接展示所有页码
- 页码切换回调中可以结合接口请求重新加载对应页的数据，实现完整的分页功能
- 可以通过参数扩展支持自定义每页条数、快速跳转等功能，提升组件的通用性