前端分页需按数据量选择策略：几千条用js切片控制tr显隐，上万条必须后端分页；核心是缓存tr节点并直接操作style.display，避免innerhtml重绘，通过start/end计算范围批量切换显示。
前端分页不是“加个插件就完事”，而是得先判断数据量和使用场景——几千条以内用 JavaScript 切片控制显隐，上万条必须后端分页，否则页面卡死、内存暴涨是分分钟的事。
怎么用 JavaScript 控制表格 tr 的显示与隐藏
核心不是重绘整张表，而是直接操作 DOM 节点的 style.display。反复 innerHTML 赋值会触发重排，慢且易丢事件绑定。
- 用
document.querySelectorAll('table tbody tr')一次性取出行节点数组，缓存起来，别每次翻页都查一遍 - 计算范围：
const start = (currentPage - 1) * pageSize，const end = start + pageSize - 遍历所有行：
rows[i].style.display = i >= start && i - 千万别用
visibility: hidden—— 它还占布局空间，表格高度会错乱
页码按钮点击后状态没同步？多半是闭包或事件绑定错了
动态生成页码按钮时，for (var i = 1; i 配 <code>onclick = function() { renderPage(i) } 是经典坑：所有按钮最终都调用 renderPage(totalPages + 1)。
- 改用
let i（块级作用域）或更稳妥的data-page方案：button.dataset.page = i，事件里读event.target.dataset.page - “上一页”按钮在
currentPage === 1时，必须加disabled属性 + CSS 灰色态，不能只靠 JS 跳过逻辑 - 点击后立即设按钮
disabled，防连点；请求完成或翻页成功后再恢复
后端分页接口返回数据结构不规范，前端分页控件直接瘫痪
常见错误是后端只返 list，不返 total 字段。前端算不出总页数，Math.ceil(total / pageSize) 就崩了。
- 请求 URL 必须带标准参数：
/api/items?page=2&pageSize=10，别用路径式如/api/items/2 - 响应体至少含两个字段：
list（当前页数据数组）和total（总数），缺一不可 -
total为null或0时要兜底：total = total || 0，再设totalPages = total === 0 ? 1 : Math.ceil(total / pageSize) - 别在 URL 里暴露
offset—— 用户手动改它可能越界查出不该看的数据
最常被忽略的不是怎么写，而是边界：空数据时页码栏消失、移动端点击区域太小、滚动后新内容看不见、网络失败没提示——这些细节不补全，用户第一次点击就会放弃。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
