JavaScript中如何实现分页功能_数据切片展示

JavaScript分页核心是用slice()按页码切片数据：起始索引为(currentPage-1)pageSize，结束索引为currentPagepageSize；总页数为Math.ceil(list.length/pageSize)；需校验currentPage在[1,totalPages]范围内并处理空数据兜底。

JavaScript中实现分页功能，核心是把一整组数据按页大小切片，再动态渲染当前页的内容。关键不在“怎么显示”，而在于“怎么算出当前该显示哪几条”。

计算当前页的数据范围

给定总数据 list、每页条数 pageSize、当前页码 currentPage（从1开始），用数组的 slice() 就能直接截取：

• 起始索引：(currentPage - 1) * pageSize
• 结束索引：currentPage * pageSize
• 当前页数据：list.slice((currentPage - 1) * pageSize, currentPage * pageSize)

注意：slice() 的第二个参数是“不包含”的，所以上面写法刚好取到第 currentPage 页的全部项。

生成页码列表（可选但常用）

如果要显示“1 2 3 … 10”这样的页码导航，需要知道总页数：

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

• 总页数 = Math.ceil(list.length / pageSize)
• 页码数组可这样生成：Array.from({ length: totalPages }, (_, i) => i + 1)

实际项目中常加逻辑限制显示页码数量（比如最多显示5个，带省略号），但基础分页只需保证页码不越界、不为0即可。

标签： javascript java html 点击事件