JavaScript前端分页核心是数据切片与状态控制，通过paginate函数实现：依据当前页码和每页条数计算起止索引，返回分页数据、总页数、上下页状态等。
JavaScript 中实现分页，核心是“数据切片 + 状态控制”，不依赖后端也能完成前端分页。关键在于：把原始数据按每页条数拆开，再根据当前页码取出对应片段，最后更新 UI。
一、基础分页逻辑（数组切片）
假设有 100 条数据，每页显示 10 条：
- 总页数 = Math.ceil(数据总数 / 每页条数)
- 当前页数据 = arr.slice((currentPage - 1) * pageSize, currentPage * pageSize)
- currentPage 从 1 开始更符合用户直觉（也可从 0，但需统一）
二、简易分页函数封装
写一个可复用的分页工具函数：
function paginate(data, page = 1, size = 10) {
const start = (page - 1) * size;
const end = start + size;
return {
list: data.slice(start, end),
total: data.length,
page,
size,
totalPages: Math.ceil(data.length / size),
hasPrev: page > 1,
hasNext: page < Math.ceil(data.length / size)
};
}调用示例：paginate(users, 3, 8) → 返回第 3 页、每页 8 条的数据及分页元信息。
立即学习“Java免费学习笔记（深入）”；
天意阿里巴巴企业商务
下载
主要分类如下:供求商机(trade leades) 产品展示(product) 企业名录(companies) 会员商务助手(MY trade office)前台功能介绍:1、网页首页显示有精品推荐,商业机会分类列表,最新供求信息,网站动态,最新企业等;2、商业机会栏目功能有：二级分类,已经带有详细分类的数据库,后台可以更改增加操作;3、展厅展品栏目功能:二级分类,已经带有详细分类的数据库,
三、绑定到页面交互（按钮 + 显示）
用几个按钮控制页码，动态渲染列表和页码栏：
- 监听「上一页」「下一页」或具体页码按钮的 click
- 更新 currentPage 状态，重新调用 paginate 获取新数据
- 用 innerHTML 或 createElement 渲染列表项
- 生成页码按钮时，避免全部渲染（比如只显示当前页 ±2 页），提升可读性
四、注意边界与体验细节
实际用时容易忽略这些点：
- 页码输入框要校验：非数字、超范围、空值都应 fallback 到合法页码
- 数据为空时，隐藏分页栏更合理
- 切换页码时，滚动回到列表顶部（listContainer.scrollTop = 0）
- 加载中状态建议加个 loading 提示，尤其结合异步请求时
基本上就这些。纯前端分页适合数据量不大（如 ≤ 5000 条）的场景；数据量大务必交给后端做 offset/limit 分页，前端只传页码和大小即可。
