可行，纯html不支持逻辑控制，分页靠javascript驱动dom更新，数据可硬编码于script标签或通过fetch加载json文件，用数组切片与innerhtml重绘实现。
用纯 HTML + JavaScript 实现分页，index.html 里不依赖框架可行吗？
可行，但必须明确一点：纯 HTML 本身不支持逻辑控制，分页功能实际靠 JavaScript 驱动 DOM 更新。所谓“HTML 数据管理”，本质是把数据（比如数组）硬编码在 <script></script> 里，或从 JSON 文件加载，再用 JS 切片 + 重绘列表。浏览器原生不提供 pagination 标签或内置分页 API，别被标题误导。
document.getElementById() + 数组切片是最直接的分页起点
适合小量静态数据（如 50 条以内），无需后端交互。核心就是用当前页码算出 start 和 end 索引，再遍历子集生成 <li> 或 <div>。<p>常见错误现象：<code>Uncaught TypeError: Cannot read property 'slice' of undefined——多半是数据数组没定义或拼写错变量名；page 1 显示空白，常因索引计算时没考虑 0 起始（比如 start = (page - 1) * pageSize 忘了减 1）。
- 页码状态建议存为变量
currentPage，别反复从按钮data-page解析 -
pageSize = 10是合理起点，超过 20 条/页会导致 DOM 渲染变慢（尤其低端设备） - 每次切换页码，先
document.querySelector('.list-container').innerHTML = ''清空旧内容，再循环插入新项，避免重复叠加
翻页按钮怎么绑定事件才不重复监听？
用事件委托最稳妥——给外层容器（如 <nav class="pagination"></nav>）绑定一次 click，再用 event.target.matches('[data-action="page"]') 判断是否点中按钮。否则每调一次 renderPagination() 都 addEventListener，会累积多个监听器，点一次翻多页。
使用场景：动态生成按钮（如根据总条数算出共 7 页，就生成 7 个 <button data-page="3">3</button>），按钮本身不写 onclick="" 内联事件，保持 HTML 干净。
- 禁用态按钮加
disabled属性比单纯改样式更可靠（防止键盘 Enter 触发） - 上一页/下一页按钮用
data-action="prev"/data-action="next"区分，比依赖文字内容（如“上一页”）更健壮 - 移动端需补
touchstart事件，否则 iOS Safari 可能有 300ms 延迟
为什么本地 JSON 加载分页比硬编码数组更实用？
硬编码数据（const data = [{}, {}]）改起来反人类：增删条目要手动改 JS，且无法复用到其他页面。而把数据放 data.json，用 fetch('./data.json') 加载，既解耦又便于测试——换文件就能换数据集。
性能影响：首次加载多 1 次 HTTP 请求，但现代浏览器缓存机制下，后续访问极快；兼容性上，fetch 在 IE 完全不可用，若需支持 IE11，得降级用 XMLHttpRequest 或引入 whatwg-fetch polyfill。
- JSON 文件路径必须相对
index.html，比如放在同级目录就写./data.json，别写data.json（部分服务器对根路径处理不一致） - 加载失败时，
catch块里至少要console.error错误，并留个空列表占位，别让页面白屏 - 数据量大（>1000 条）时，考虑用
JSON.parse()后立刻sort()或filter()，避免每次翻页都全量处理
分页逻辑本身很简单，真正容易被忽略的是数据来源的稳定性——JSON 字段名拼错、日期格式不统一、空值没兜底，都会让某一页突然崩掉，而错误提示往往藏在控制台里没人看。
