分页实现js
分页实现的基本原理
分页功能通常用于数据量较大的场景，将数据分割成多个页面展示。核心逻辑包括计算总页数、当前页数据切片、页码按钮生成等。
纯前端分页实现
假设已有完整数据数组，仅需前端分页展示：
// 示例数据
const allData = [...Array(100).keys()].map(i => ({ id: i, name: `Item ${i}` }));
// 分页配置
const paginate = (data, currentPage = 1, perPage = 10) => {
const totalItems = data.length;
const totalPages = Math.ceil(totalItems / perPage);
const startIdx = (currentPage - 1) * perPage;
const paginatedData = data.slice(startIdx, startIdx + perPage);
return {
currentPage,
perPage,
totalPages,
totalItems,
data: paginatedData
};
};
// 使用示例
const result = paginate(allData, 2);
console.log(result.data); // 获取第二页数据动态渲染分页控件
function renderPagination(totalPages, currentPage) {
const container = document.getElementById('pagination');
container.innerHTML = '';
// 上一页按钮
if (currentPage > 1) {
const prevBtn = document.createElement('button');
prevBtn.textContent = 'Previous';
prevBtn.addEventListener('click', () => updatePage(currentPage - 1));
container.appendChild(prevBtn);
}
// 页码按钮
for (let i = 1; i <= totalPages; i++) {
const pageBtn = document.createElement('button');
pageBtn.textContent = i;
if (i === currentPage) {
pageBtn.classList.add('active');
}
pageBtn.addEventListener('click', () => updatePage(i));
container.appendChild(pageBtn);
}
// 下一页按钮
if (currentPage < totalPages) {
const nextBtn = document.createElement('button');
nextBtn.textContent = 'Next';
nextBtn.addEventListener('click', () => updatePage(currentPage + 1));
container.appendChild(nextBtn);
}
}结合AJAX的后端分页
当数据量非常大时，建议采用后端分页：
async function fetchPaginatedData(page = 1, size = 10) {
const response = await fetch(`/api/items?page=${page}&size=${size}`);
const { data, total } = await response.json();
renderData(data);
renderPagination(Math.ceil(total / size), page);
}
// 调用示例
fetchPaginatedData(1);分页组件优化建议
- 添加页码省略功能（当页数过多时显示...）
- 支持自定义每页显示数量
- 加入加载状态指示器
- 实现URL同步（保持浏览器地址栏与当前页码同步）
// URL同步示例
function updatePage(page) {
window.history.pushState({}, '', `?page=${page}`);
fetchPaginatedData(page);
}
// 监听popstate事件
window.addEventListener('popstate', () => {
const urlParams = new URLSearchParams(window.location.search);
const page = urlParams.get('page') || 1;
fetchPaginatedData(page);
});常见分页样式实现
对于不同的UI需求，可以调整分页控件的样式：
.pagination button {
margin: 0 5px;
padding: 5px 10px;
border: 1px solid #ddd;
background: white;
}
.pagination button.active {
background: #007bff;
color: white;
border-color: #007bff;
}以上代码提供了从基础到进阶的分页实现方案，可根据实际项目需求进行调整和扩展。
