分页功能通过按需加载提升性能，Node.js后端用page、limit、offset参数查询数据并返回总条数，前端用Fetch请求接口并动态渲染列表与页码。
实现分页功能是全栈开发中的常见需求，尤其是在处理大量数据时。JavaScript 全栈（前端 + Node.js 后端）可以通过前后端协作高效完成分页功能。下面从原理到具体实现一步步讲解。
分页功能的基本原理
分页的核心思想是“按需加载”：不一次性返回所有数据，而是根据当前页码和每页数量，只返回对应的数据片段，从而减少网络传输、提升页面响应速度。
关键参数包括：
- page：当前页码（通常从 1 开始）
- limit：每页显示条数（如 10、20）
- offset：偏移量 = (page - 1) * limit，数据库查询跳过的记录数
- total：总记录数，用于计算总页数
后端根据这些参数进行数据库查询，前端负责发送请求并渲染结果和页码控件。
Node.js 后端实现分页接口
使用 Express 搭建后端服务，以 MySQL 或 MongoDB 为例说明如何实现分页查询。
示例：Express + MySQL 分页接口假设有一个文章表 articles，我们提供一个获取分页数据的 API：
app.get('/api/articles', async (req, res) => {
const page = parseInt(req.query.page) || 1;
const limit = parseInt(req.query.limit) || 10;
const offset = (page - 1) * limit;
<p>try {
// 查询总数
const [totalResult] = await db.query('SELECT COUNT(*) AS total FROM articles');
const total = totalResult[0].total;</p><pre class='brush:php;toolbar:false;'>// 查询当前页数据
const [rows] = await db.query(
'SELECT * FROM articles ORDER BY id LIMIT ? OFFSET ?',
[limit, offset]
);
res.json({
data: rows,
pagination: {
page,
limit,
total,
totalPages: Math.ceil(total / limit)
}
});} catch (err) { res.status(500).json({ error: err.message }); } });
这样前端请求 /api/articles?page=2&limit=10 就能拿到第二页的 10 条数据。
MongoDB 示例（使用 Mongoose）
如果你用的是 MongoDB，逻辑更简单：
Article.find()
.sort({ _id: 1 })
.skip((page - 1) * limit)
.limit(limit)
.then(data => {
res.json({
data,
pagination: {
page,
limit,
total: data.length, // 实际应查 totalCount
}
});
});
注意：实际项目中也要单独查一次 total count。
前端 JS 实现分页交互
前端通过 Fetch 调用后端接口，并动态生成数据列表和页码按钮。
HTML 结构：
<div id="article-list"></div> <div id="pagination"></div>
JavaScript 请求并渲染：
async function loadArticles(page = 1, limit = 10) {
const res = await fetch(`/api/articles?page=${page}&limit=${limit}`);
const result = await res.json();
<p>// 渲染文章列表
const listEl = document.getElementById('article-list');
listEl.innerHTML = result.data.map(article =>
<code><div><h3>${article.title}</h3><p>${article.content}</p></div></code>
).join('');</p><p>// 渲染分页控件
renderPagination(result.pagination);
}</p><p>function renderPagination({ page, totalPages }) {
const paginationEl = document.getElementById('pagination');
let html = '';</p><p>for (let i = 1; i <= totalPages; i++) {
html += <code><button onclick="loadArticles(${i})" ${i === page ? 'disabled' : ''}>${i}</button></code>;
}</p><p>paginationEl.innerHTML = html;
}</p><p>// 初始化加载第一页
loadArticles();</p>用户点击页码按钮时，重新请求对应页的数据并刷新页面内容。
优化建议与注意事项
在真实项目中，可以进一步优化分页体验：
- 添加“上一页”“下一页”按钮，支持翻页导航
- 限制显示页码数量（如最多显示 5 个），避免页码过多影响布局
- 前端缓存已加载的页数据，避免重复请求
- 使用防抖或节流防止频繁点击翻页
- 后端做好参数校验，防止 SQL 注入或异常输入
- 考虑使用游标分页（cursor-based pagination）替代传统 offset 分页，避免大数据量下的性能问题
对于高并发场景，offset 分页在大页码时性能较差（如 LIMIT 10000,10），可改用基于主键或时间戳的游标方式。
基本上就这些。JS 全栈实现分页并不复杂，关键是前后端参数对齐、接口设计清晰、用户体验友好。掌握这一套流程，就能轻松应对大多数列表分页需求。
