js怎么实现分页效果
使用原生JavaScript实现分页
创建一个分页函数，接收总数据量、每页显示条数和当前页码作为参数，生成分页HTML结构并绑定事件：
function createPagination(totalItems, itemsPerPage, currentPage) {
const totalPages = Math.ceil(totalItems / itemsPerPage);
let paginationHTML = '<div class="pagination">';
if (currentPage > 1) {
paginationHTML += `<span class="page-item prev" data-page="${currentPage - 1}">上一页</span>`;
}
for (let i = 1; i <= totalPages; i++) {
const activeClass = i === currentPage ? ' active' : '';
paginationHTML += `<span class="page-item${activeClass}" data-page="${i}">${i}</span>`;
}
if (currentPage < totalPages) {
paginationHTML += `<span class="page-item next" data-page="${currentPage + 1}">下一页</span>`;
}
paginationHTML += '</div>';
return paginationHTML;
}
document.addEventListener('click', function(e) {
if (e.target.classList.contains('page-item')) {
const page = parseInt(e.target.dataset.page);
loadPageData(page); // 自定义的数据加载函数
}
});结合AJAX实现动态分页
将分页与数据请求结合，实现无刷新分页效果：
function loadPageData(page) {
fetch(`/api/data?page=${page}&limit=10`)
.then(response => response.json())
.then(data => {
renderData(data.items);
document.getElementById('pagination').innerHTML =
createPagination(data.total, 10, page);
});
}
function renderData(items) {
const container = document.getElementById('data-container');
container.innerHTML = items.map(item =>
`<div class="item">${item.name}</div>`
).join('');
}使用第三方库实现分页
对于复杂场景，可以使用现成的分页库如twbs-pagination：
$('#pagination').twbsPagination({
totalPages: 35,
visiblePages: 7,
onPageClick: function (event, page) {
loadPageData(page);
}
});分页样式设计建议
添加基础CSS样式增强用户体验：
.pagination {
display: flex;
gap: 5px;
margin-top: 20px;
}
.page-item {
padding: 5px 10px;
border: 1px solid #ddd;
cursor: pointer;
}
.page-item.active {
background: #007bff;
color: white;
}
.page-item:hover:not(.active) {
background: #f0f0f0;
}性能优化考虑
对于大数据量分页，建议实现以下优化：
- 添加加载状态指示器
- 实现数据缓存避免重复请求
- 考虑虚拟滚动技术替代传统分页
- 对移动端实现响应式分页控件
实现完整分页功能需要前后端配合，后端应提供总记录数和分页数据接口，前端负责渲染分页UI和处理用户交互。
