js分页实现前端实现
分页实现的基本原理
前端分页通常通过截取当前页对应的数据片段实现，核心逻辑包括计算总页数、当前页数据范围等。以下是一个基于JavaScript的通用实现方案。
数据分片处理
假设已有完整数据数组dataList，根据当前页码currentPage和每页条数pageSize截取数据：
function getPaginatedData(dataList, currentPage, pageSize) {
const startIndex = (currentPage - 1) * pageSize;
const endIndex = startIndex + pageSize;
return dataList.slice(startIndex, endIndex);
}计算总页数
function getTotalPages(dataList, pageSize) {
return Math.ceil(dataList.length / pageSize);
}分页控件示例
<div id="pagination">
<button id="prev">上一页</button>
<span id="pageInfo"></span>
<button id="next">下一页</button>
</div>// 初始化分页
let currentPage = 1;
const pageSize = 10;
const totalPages = getTotalPages(dataList, pageSize);
// 更新页面显示
function updatePage() {
const paginatedData = getPaginatedData(dataList, currentPage, pageSize);
document.getElementById('pageInfo').textContent = `${currentPage}/${totalPages}`;
renderData(paginatedData); // 自定义的数据渲染函数
}
// 事件绑定
document.getElementById('prev').addEventListener('click', () => {
if (currentPage > 1) {
currentPage--;
updatePage();
}
});
document.getElementById('next').addEventListener('click', () => {
if (currentPage < totalPages) {
currentPage++;
updatePage();
}
});
// 初始化
updatePage();动态页码按钮生成
对于多页码场景，可动态生成页码按钮：
function renderPaginationButtons() {
const container = document.getElementById('pagination');
container.innerHTML = '';
// 上一页按钮
if (currentPage > 1) {
const prevBtn = document.createElement('button');
prevBtn.textContent = '上一页';
prevBtn.addEventListener('click', () => {
currentPage--;
updatePage();
});
container.appendChild(prevBtn);
}
// 页码按钮
for (let i = 1; i <= totalPages; i++) {
const pageBtn = document.createElement('button');
pageBtn.textContent = i;
if (i === currentPage) {
pageBtn.disabled = true;
}
pageBtn.addEventListener('click', () => {
currentPage = i;
updatePage();
});
container.appendChild(pageBtn);
}
// 下一页按钮
if (currentPage < totalPages) {
const nextBtn = document.createElement('button');
nextBtn.textContent = '下一页';
nextBtn.addEventListener('click', () => {
currentPage++;
updatePage();
});
container.appendChild(nextBtn);
}
}性能优化建议
对于大数据量场景，建议采用虚拟滚动或懒加载技术。以下是基于窗口化的优化代码片段：
function getWindowedData(dataList, startIndex, windowSize) {
return dataList.slice(startIndex, startIndex + windowSize);
}注意事项
- 分页逻辑应独立于数据获取，适合前端处理已加载的完整数据集
- 对于AJAX分页场景，建议将页码参数传递给后端处理
- 移动端需考虑触摸事件和响应式布局
- 可结合第三方库如
react-paginate或vue-paginate实现更复杂功能
