JavaScript分页需动态控制ol中li的display属性，用CSS counter修复序号连续性，避免page-break等无效方案，并通过事件委托和性能优化提升体验。
用 JavaScript 控制 ol 的显示范围实现分页
原生 HTML 的 ol 标签本身不支持分页，必须靠 JS 动态控制哪些 li 显示、哪些隐藏。核心思路是：把所有 li 一次性渲染进 DOM，再按页码计算起始/结束索引，用 display: none 切换可见性。
常见错误是试图用 CSS 的 @media 或伪类分页——这些对滚动容器内的列表完全无效；也有人误用 page-break，但它只影响打印样式，对屏幕分页无用。
- 每页显示数量建议设为变量（如
pageSize = 10），便于后续调整 - 用
ol.querySelectorAll('li')获取全部项，避免依赖ol.children（可能含文本节点） - 切换页码时，先统一设所有
li为display: none，再批量设目标区间为display: list-item - 注意：若
ol有自定义start属性（如start="100"），页码切换后序号不会自动重算，需用 CSScounter-reset+counter-increment修复（见下节）
修复跨页时 ol 的序号连续性（start 和 CSS counters）
直接隐藏部分 li 后，浏览器仍按原始顺序渲染序号，导致第 2 页首项显示为 “11” 而非 “1”。有两种解法：
- 移除原
ol的start属性，改用 CSS counter 手动控制编号：给ol设counter-reset: item [起始值]，给li::before设content: counter(item) ". "; counter-increment: item; - 若必须保留原
start，可在切换页码后，动态修改当前页第一个li的value属性（如li[0].value = currentPage * pageSize + 1），但此法兼容性差（Safari 对动态value支持不稳定） - 更稳妥的做法是放弃原生序号，全程用 CSS counter：它不受 DOM 隐藏影响，且可精确控制起始值和格式（如字母序号
lower-alpha）
添加页码导航并绑定点击事件
页码按钮不是装饰，要能真实触发 ol 内容更新。关键点在于避免重复绑定、防止快速连点导致状态错乱。
立即学习“前端免费学习笔记（深入）”；
- 用事件委托：给页码容器（如
div.pagination）绑定click，通过event.target.dataset.page读取页码，而非给每个按钮单独绑事件 - 页码按钮的
data-page值应为数字（非字符串），方便后续计算：parseInt(event.target.dataset.page) - 禁用当前页按钮（加
disabled或pointer-events: none），并用 CSS 区分状态（如当前页背景高亮） - 首次加载时，主动调用一次翻页函数（如
goToPage(1)），确保第一页内容正确显示
性能注意：大数据量下避免重排（reflow）
当 ol 有上千个 li 时，频繁设置 display 会触发多次 layout，造成卡顿。
- 用
DocumentFragment预先构建页码对应的所有li，再一次性替换ol.innerHTML（适合内容不常变的场景） - 更推荐用
getBoundingClientRect()或IntersectionObserver实现虚拟滚动：只渲染可视区域前后几页的内容，其余用占位div占高度 - 若坚持用显隐切换，批量操作前加
ol.style.display = 'none'，操作完再恢复，减少重排次数 - 慎用
opacity: 0替代display: none——它不释放空间，且仍参与布局计算
分页逻辑本身简单，难的是序号重置和大数据下的渲染效率。很多人卡在序号不对，其实问题不在 JS 分页，而在没意识到浏览器序号是“全局连续”的，必须用 CSS counter 或手动 value 控制才能破局。
