17370845950

JavaScript分页核心是数据切片、状态控制与视图更新，分为纯前端静态分页、懒加载式分页、带搜索的动态分页和服务端分页四类，适用场景依数据规模与后端支持而定。

用 JavaScript 实现分页功能，核心是“数据切片 + 状态控制 + 视图更新”，不依赖后端时重点在前端数据分块和用户交互逻辑。下面几种常见思路，按适用场景和复杂度排列：

纯前端静态分页（适合数据量小、已全部加载）

把一整组数据按每页条数（如 10 条）切成多个子数组，用一个 currentPage 变量记录当前页码，每次切换就取对应页的数据渲染。

• 计算总页数：Math.ceil(data.length / pageSize)
• 获取当前页数据：data.slice((currentPage - 1) * pageSize, currentPage * pageSize)
• 禁用无效页码按钮（如第 1 页时“上一页”灰掉，最后一页时“下一页”禁用）

懒加载式分页（滚动到底部自动加载下一页）

适用于长列表、不想一次性拉太多数据的场景。监听滚动位置，当接近底部时触发加载，把新数据追加到现有列表末尾，并更新页码状态。

• 用 IntersectionObserver 监听“加载更多”占位符是否进入视口，比 scroll 事件更轻量
• 维护 loadedPages = [1,2] 这样的已加载页集合，避免重复请求
• 显示加载中提示，加载失败要提供重试入口

带搜索/过滤的动态分页

用户输入关键词或选择筛选条件后，先对原始数据做过滤，再重新分页。关键点是：分页状态（当前页码）要在过滤后重置为第 1 页，否则可能跳到空页。

• 每次过滤后执行 currentPage = 1，再重新计算总页数和当前页数据
• 把过滤条件和分页参数一起缓存（比如存在 URL 的 query string 或 sessionStorage 中），方便返回时恢复
• 可加防抖处理输入框，避免频繁重算

服务端分页（最常用、推荐用于中大型项目）

前端只传页码和每页数量（如 page=3&limit=20），由后端返回该页数据 + 总条数。前端据此算出总页数并渲染分页控件。

• 响应体建议含 total（总记录数）、data（当前页数据）、page 和 limit
• 点击页码时发新请求，同时禁用按钮防止重复提交
• 错误处理要明确：无数据时显示空状态，请求失败给出提示和重试按钮

基本上就这些。选哪种取决于数据规模、用户体验要求和后端支持程度。小项目用静态分页够用；真实业务系统优先和服务端分页配合；滚动加载适合内容流类页面。不复杂但容易忽略细节，比如页码越界、状态同步、加载反馈——补上这些，分页就稳了。