HTML怎么做表格分页_HTML表格数据分页展示方法实战

小数据量（几千条内）用前端分页，上万条须后端分页；前端通过 slice 控制 tr 显隐，用 querySelectorAll 缓存行元素，按 pageSize 和 currentPage 计算范围并设置 display。

小数据量（几千条以内）直接用 JavaScript 前端分页就行；上万条起步，必须切到后端分页，否则页面卡死、内存爆掉是常态。

前端分页：用 slice() 控制表格行显隐

核心不是重绘整个表格，而是动态控制 <tr> 的 display 状态。直接操作 DOM 比反复 innerHTML = ... 更轻量、更可控。

• 先用 document.querySelectorAll('table tbody tr') 拿到所有数据行，存成数组，避免每次翻页都重新查 DOM
• 每页显示数设为 pageSize = 10，当前页码 currentPage = 1
• 计算范围：const start = (currentPage - 1) * pageSize，const end = start + pageSize
• 遍历所有行：rows[i].style.display = i >= start && i
• 注意：不要用 visibility: hidden —— 它仍占布局空间，会导致表格高度异常

后端分页：请求参数必须带 page 和 pageSize

前端发请求时，只传这两个参数就够了，别拼错名，也别漏掉校验。后端返回的数据结构里，必须包含 list（当前页数据）和 total（总条数），缺一不可。

• 常见错误：后端只返回 list，前端算不出总页数 → 分页控件无法生成页码按钮
• 请求 URL 示例：/api/users?page=2&pageSize=20，不是 /api/users/2 这种路径式写法（不易维护、不通用）
• 前端收到响应后，清空 tbody 再用 insertRow() 或 innerHTML 渲染，别忘了更新页码状态（比如禁用“下一页”按钮）
• 别在 URL 中暴露敏感参数，如 offset —— 容易被用户篡改导致越界查询

分页控件点击事件容易踩的坑

按钮没禁用、页码跳转后状态没同步、点击空白处触发多次，这些问题几乎都出在事件绑定和状态管理上。

立即学习“前端免费学习笔记（深入）”；

• “上一页”按钮在 currentPage === 1 时，务必设 disabled 属性并加 CSS 灰色态，不能只靠 JS 判断跳过逻辑
• 页码按钮用 for 循环动态生成时，别用闭包传参（let i 要写对），更推荐用 data-page 属性 + event.target.dataset.page
• 点击页码后，要重置滚动位置：document.querySelector('tbody').scrollIntoView({ block: 'nearest' })，否则用户可能看不到新内容
• 防连点：点击后立即给按钮加 disabled，请求完成再恢复，否则快速连点会发多个重复请求

最常被忽略的是错误边界：网络失败时没 fallback 提示，total 返回 null 或 0 时没兜底逻辑，还有移动端点击区域太小导致误操作——这些细节不处理，分页功能就算写完了，也撑不过真实用户三分钟。