当前位置：首页 > JavaScript

js分页实现...

2026-03-13 16:21:14JavaScript

分页实现的基本思路

分页功能通常涉及前端展示和后端数据处理。前端负责渲染分页控件和处理用户交互，后端负责根据分页参数返回对应的数据。

前端分页实现

使用JavaScript实现前端分页需要以下步骤：

获取数据 从后端API获取数据，通常是一个数组或对象列表。

fetch('/api/data')
  .then(response => response.json())
  .then(data => {
    renderPagination(data);
  });

分页逻辑 根据每页显示的条目数和当前页码，计算需要展示的数据。

function paginate(data, currentPage, itemsPerPage) {
  const startIndex = (currentPage - 1) * itemsPerPage;
  const endIndex = startIndex + itemsPerPage;
  return data.slice(startIndex, endIndex);
}

渲染分页控件 动态生成分页按钮，并绑定点击事件。

function renderPagination(data, itemsPerPage = 10) {
  const totalPages = Math.ceil(data.length / itemsPerPage);
  let paginationHTML = '';
  for (let i = 1; i <= totalPages; i++) {
    paginationHTML += `<button class="page-btn" data-page="${i}">${i}</button>`;
  }
  document.getElementById('pagination').innerHTML = paginationHTML;

  // 绑定事件
  document.querySelectorAll('.page-btn').forEach(btn => {
    btn.addEventListener('click', () => {
      const currentPage = parseInt(btn.dataset.page);
      const paginatedData = paginate(data, currentPage, itemsPerPage);
      renderData(paginatedData);
    });
  });
}

后端分页实现

后端分页通常结合数据库查询实现，以下是Node.js + Express的示例：

接收分页参数 通过查询参数接收当前页码和每页条目数。

app.get('/api/data', (req, res) => {
  const page = parseInt(req.query.page) || 1;
  const limit = parseInt(req.query.limit) || 10;
  const offset = (page - 1) * limit;

  // 数据库查询
  db.query('SELECT * FROM table LIMIT ? OFFSET ?', [limit, offset], (err, results) => {
    if (err) throw err;
    res.json(results);
  });
});

返回分页信息 通常还会返回总页数或总条目数，方便前端计算。

db.query('SELECT COUNT(*) as total FROM table', (err, countResult) => {
  const total = countResult[0].total;
  const totalPages = Math.ceil(total / limit);

  res.json({
    data: results,
    pagination: {
      page,
      limit,
      total,
      totalPages
    }
  });
});