17370845950

分页组件核心是总数据量、每页数量与当前页码三者实时同步；通过数组切片获取本页数据，按规则生成省略式页码导航，并响应切换更新视图与页码，需校验边界条件。

分页组件的核心是根据总数据量、每页条数和当前页码，算出要显示的数据片段，并动态生成页码导航。关键不在渲染本身，而在三组关系的实时同步：总数据 ↔ 每页数量 ↔ 当前页码。

计算当前页显示的数据

给定一个数组 data、每页数量 pageSize、当前页码 currentPage（从 1 开始），用数组切片就能拿到本页数据：

• 起始索引：(currentPage - 1) * pageSize
• 结束索引：currentPage * pageSize
• 实际取值：data.slice(start, end)

例如 data 长度为 103，pageSize = 10，currentPage = 3 → start = 20，end = 30 → 取第 21–30 条。

计算总页数和页码范围

总页数 = Math.ceil(data.length / pageSize)。但页码栏不宜全列（比如 100 页只显中间 5–7 个），常用“省略式”逻辑：

• 始终显示第 1 页和最后 1 页
• 当前页前后各留 1–2 个（如 current=5，显示 4、5、6）
• 若当前页靠近开头（如 ≤3），则显示 1、2、3、…、last
• 若靠近结尾（如 ≥ total−2），则显示 1、…、total−2、total−1、total

可封装成函数返回页码数组，例如：[1, '...', 4, 5, 6, '...', 11]。

响应页码切换并更新视图

监听页码点击或输入，更新 currentPage 后需同步两件事：

• 重新调用数据切片，更新渲染列表
• 重新生成页码数组，更新底部导航栏
• 可加防抖或边界校验：若 currentPage ，自动设为 1；若超总页数，设为最后一页

不建议每次翻页都重新请求全部数据——如果后端支持，应传 page 和 size 参数做真分页；前端分页仅适用于数据量小、已全部加载的场景。

简单可运行示例结构

用纯 JS + HTML 实现时，核心变量就三个：data、pageSize、currentPage。每次修改 currentPage 后调用：

• renderList() —— 渲染表格/列表区域
• renderPagination() —— 渲染页码按钮和禁用状态（如上一页/下一页灰掉）

按钮事件里直接改 currentPage++ 或赋新值，再调这两个函数即可。不需要框架也能清晰可控。

基本上就这些。逻辑不复杂，但容易忽略边界（比如空数据、pageSize为0、currentPage非数字），加上几行校验就稳了。