JavaScript无刷新分页功能
JS 的无刷新分页功能，真的挺实用的，是数据多、页面切换频的那种场景，比如商品列表、文章评论这些。通过AJAX异步加载数据，不用每次都整页刷新，体验好多。
核心思路也蛮：先写好基本的HTML 结构和分页按钮样式，用JavaScript给每个分页按钮加监听，用户一点击，就发起一个AJAX 求，后台返回数据，前端再动态更新内容区域。
你可以用老派的 XMLHttpRequest，也可以用现在流行的 fetch，都能搞定。如果你对数据是本地模拟的，甚至连接口都省了，直接切数组展示也行。
代码结构建议先把数据和分页逻辑抽出来，封装成函数，后期维护也方便。像下面这样：
function renderPage(page) {
let start = (page - 1) * itemsPerPage;
let end = start + itemsPerPage;
let pageData = data.slice(start, end);
// 更新 DOM 操作...
}嗯，如果你用的是 jQuery，事件绑定和 AJAX 会更顺手，推荐看看这篇 jQuery 无刷新分页。
整体来看，这套实现方式比较轻量，不依赖框架，适合纯 JS 开发的项目。如果你要做得更稳，可以加个 loading 状态、异常这些，细节打磨下就成熟了。
如果你刚好在做一个需要分页的项目，又不想刷新页面，不妨试试这种方式，开发起来还挺顺的。
文件大小：1.24KB
评论区