js实现table分页
实现表格分页的基本思路
在JavaScript中实现表格分页通常涉及以下几个核心步骤：数据分块、动态渲染、分页控件交互。以下是具体实现方法。
准备HTML结构
创建一个包含表格和分页控件的HTML结构：
<table id="dataTable">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Email</th>
</tr>
</thead>
<tbody></tbody>
</table>
<div id="pagination">
<button id="prevBtn">Previous</button>
<span id="pageInfo">Page 1 of 5</span>
<button id="nextBtn">Next</button>
</div>获取和分块数据
假设已有数据数组，将其分割为每页固定数量的子数组：
const data = [
{ id: 1, name: 'Alice', email: 'alice@example.com' },
// 更多数据...
];
const itemsPerPage = 5;
let currentPage = 1;
function paginateData() {
const startIndex = (currentPage - 1) * itemsPerPage;
return data.slice(startIndex, startIndex + itemsPerPage);
}动态渲染表格
根据当前页数渲染对应的数据行：
function renderTable() {
const pageData = paginateData();
const tbody = document.querySelector('#dataTable tbody');
tbody.innerHTML = '';
pageData.forEach(item => {
const row = document.createElement('tr');
row.innerHTML = `
<td>${item.id}</td>
<td>${item.name}</td>
<td>${item.email}</td>
`;
tbody.appendChild(row);
});
updatePageInfo();
}更新分页信息
显示当前页码和总页数：
function updatePageInfo() {
const totalPages = Math.ceil(data.length / itemsPerPage);
document.getElementById('pageInfo').textContent =
`Page ${currentPage} of ${totalPages}`;
// 禁用/启用按钮
document.getElementById('prevBtn').disabled = currentPage === 1;
document.getElementById('nextBtn').disabled = currentPage === totalPages;
}添加分页事件监听
为分页按钮添加点击事件处理：
document.getElementById('prevBtn').addEventListener('click', () => {
if (currentPage > 1) {
currentPage--;
renderTable();
}
});
document.getElementById('nextBtn').addEventListener('click', () => {
const totalPages = Math.ceil(data.length / itemsPerPage);
if (currentPage < totalPages) {
currentPage++;
renderTable();
}
});
// 初始化渲染
renderTable();扩展功能建议
- 添加页码跳转：可以增加输入框允许直接跳转到指定页码
- 动态修改每页条数：添加下拉菜单让用户选择每页显示的数据量
- AJAX数据加载：对于大数据量，可以通过后端API分页获取数据
- 样式优化：为分页控件添加CSS样式提升用户体验
这种方法适用于客户端数据量适中的场景。如果数据量非常大（如超过1000条），建议采用服务端分页方式。
