全栈JS怎么实现分页功能_分页功能原理与JS前后端全栈实现方法详解

技术教程
2025-11-28 19:25:02

分页功能通过按需加载提升性能，Node.js后端用page、limit、offset参数查询数据并返回总条数，前端用Fetch请求接口并动态渲染列表与页码。

全栈js怎么实现分页功能_分页功能原理与js前后端全栈实现方法详解

实现分页功能是全栈开发中的常见需求，尤其是在处理大量数据时。J*aScript 全栈（前端 + 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，逻辑更简单：

稿定抠图

AI自动消除图片背景

80 查看详情稿定抠图

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>

J*aScript 请求并渲染：

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>

用户点击页码按钮时，重新请求对应页的数据并刷新页面内容。