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 条的数据及分页元信息。

三、绑定到页面交互（按钮 + 显示）

用几个按钮控制页码，动态渲染列表和页码栏：

• 监听「上一页」「下一页」或具体页码按钮的 click
• 更新 currentPage 状态，重新调用 paginate 获取新数据
• 用 innerHTML 或 createElement 渲染列表项
• 生成页码按钮时，避免全部渲染（比如只显示当前页 ±2 页），提升可读性

四、注意边界与体验细节

实际用时容易忽略这些点：

• 页码输入框要校验：非数字、超范围、空值都应 fallback 到合法页码
• 数据为空时，隐藏分页栏更合理
• 切换页码时，滚动回到列表顶部（listContainer.scrollTop = 0）
• 加载中状态建议加个 loading 提示，尤其结合异步请求时

基本上就这些。纯前端分页适合数据量不大（如 ≤ 5000 条）的场景；数据量大务必交给后端做 offset/limit 分页，前端只传页码和大小即可。