如何用JavaScript实现一个分页组件_如何计算页码和更新数据？

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

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

计算当前页显示的数据

给定一个数组 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 个），常用“省略式”逻辑：

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

• 始终显示第 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]。

标签： javascript java html js 前端 后端