使用HTML创建表格结构，通过JavaScript实现排序与分页功能。2. 表头点击触发sortTable函数，按列排序并自动识别数据类型。3. 利用displayPage和setupPagination函数实现分页显示与页码生成。4. 结合CSS隐藏非当前页行，提升数据可读性和交互性，无需大型框架即可满足常见需求。
在HTML中插入数据表格并实现排序与分页功能，能显著提升网页数据的可读性和交互性。虽然HTML本身只能构建静态表格，但结合JavaScript和CSS可以轻松实现排序和分页。下面详细介绍如何一步步完成。
创建基础HTML表格
使用<table>标签构建表格结构，包含表头<thead>和数据体<tbody>，便于后续操作。
示例代码：
<table id="data-table"><thead>
<tr>
<th onclick="sortTable(0)">姓名</th>
<th onclick="sortTable(1)">年龄</th>
<th onclick="sortTable(2)">城市</th>
</tr>
</thead>
<tbody>
<tr><td>张三</td><td>28</td><td>北京</td></tr>
<tr><td>李四</td><td>34</td><td>上海</td></tr>
<tr><td>王五</td><td>25</td><td>广州</td></tr>
<!-- 更多行... -->
</tbody>
</table>
实现表格排序功能
通过JavaScript获取表头点击事件，按指定列对tbody中的行进行排序。根据单元格内容自动判断是数字还是字符串排序。
立即学习“前端免费学习笔记（深入）”；
实现方法：
function sortTable(columnIndex) {
const table = document.getElementById("data-table");
let rows = Array.from(table.tBodies[0].rows);
let isAscending = table.getAttribute("data-sort-order") === "asc" ? false : true;
rows.sort((a, b) => {
const cellA = a.cells[columnIndex].textContent.trim();
const cellB = b.cells[columnIndex].textContent.trim();
let valA = isNaN(cellA) ? cellA : parseFloat(cellA);
let valB = isNaN(cellB) ? cellB : parseFloat(cellB);
return isAscending
? (valA > valB ? 1 : -1)
: (valA });
rows.forEach(row => table.tBodies[0].appendChild(row));
table.setAttribute("data-sort-order", isAscending ? "asc" : "desc");
}
</script>
添加分页功能
当表格数据较多时，分页能提升性能和用户体验。通过设置每页显示行数，动态控制只显示当前页的数据。
实现步骤：
- 定义每页显示条数（如10条）
- 计算总页数
- 创建页码导航按钮
- 点击页码时更新显示对应数据
示例代码片段：
<div id="pagination"></div><script>
let currentPage = 1;
const rowsPerPage = 2;
const tableBody = document.querySelector("#data-table tbody");
const allRows = tableBody.getElementsByTagName("tr");
const totalPages = Math.ceil(allRows.length / rowsPerPage);
function displayPage(page) {
Array.from(allRows).forEach((row, index) => {
row.style.display = (index >= (page-1)*rowsPerPage && index < page*rowsPerPage) ? "" : "none";
});
}
function setupPagination() {
const container = document.getElementById("pagination");
container.innerHTML = "";
for (let i = 1; i <= totalPages; i++) {
const btn = document.createElement("button");
btn.innerText = i;
btn.onclick = () => { currentPage = i; displayPage(i); };
container.appendChild(btn);
}
}
// 初始化
displayPage(1);
setupPagination();
</script>
基本上就这些。通过合理组织HTML结构，配合简洁的JavaScript逻辑，就能实现功能完整的表格排序与分页。不需要引入大型框架也能满足大多数场景需求。
