如何实现js分页

实现 JavaScript 分页的方法

客户端分页实现

将全部数据加载到前端，通过 JavaScript 分割数据并渲染分页控件。适用于数据量较小的场景。

// 示例数据
const allData = [...]; // 你的数据数组
const itemsPerPage = 10;
let currentPage = 1;

function renderPage(page) {
  const start = (page - 1) * itemsPerPage;
  const end = start + itemsPerPage;
  const pageData = allData.slice(start, end);
  // 渲染数据到页面
}

function renderPagination() {
  const totalPages = Math.ceil(allData.length / itemsPerPage);
  let paginationHTML = '';

  for (let i = 1; i <= totalPages; i++) {
    paginationHTML += `<button onclick="changePage(${i})">${i}</button>`;
  }

  document.getElementById('pagination').innerHTML = paginationHTML;
}

function changePage(page) {
  currentPage = page;
  renderPage(currentPage);
}

服务器端分页实现

通过 AJAX 请求从服务器获取分页数据，适合大数据量场景。

function fetchPage(page) {
  fetch(`/api/data?page=${page}&limit=10`)
    .then(response => response.json())
    .then(data => {
      // 渲染数据
      renderData(data.items);
      // 渲染分页控件
      renderPagination(data.totalPages, page);
    });
}

function renderPagination(totalPages, currentPage) {
  let paginationHTML = '';
  for (let i = 1; i <= totalPages; i++) {
    const active = i === currentPage ? 'active' : '';
    paginationHTML += `<button class="${active}" onclick="fetchPage(${i})">${i}</button>`;
  }
  document.getElementById('pagination').innerHTML = paginationHTML;
}

使用现成库简化开发

可以考虑使用现成的分页库如 DataTables、Pagination.js 等。

// 使用 Pagination.js 示例
new Pagination(document.getElementById('pagination'), {
  total: 100, // 总条目数
  current: 1, // 当前页
  length: 10, // 每页显示条目数
  size: 2, // 显示页码数
  onChange: function(page) {
    fetchPage(page);
  }
});

分页控件样式优化

为分页控件添加 CSS 样式提升用户体验。

.pagination {
  display: flex;
  gap: 5px;
}

.pagination button {
  padding: 5px 10px;
  border: 1px solid #ddd;
  background: white;
  cursor: pointer;
}

.pagination button.active {
  background: #007bff;
  color: white;
  border-color: #007bff;
}

分页逻辑优化

实现首页、末页、上一页、下一页等导航功能，以及禁用不可用按钮状态。

function renderPagination(totalPages, currentPage) {
  let html = `
    <button ${currentPage === 1 ? 'disabled' : ''} onclick="changePage(1)">首页</button>
    <button ${currentPage === 1 ? 'disabled' : ''} onclick="changePage(${currentPage - 1})">上一页</button>
  `;

  // 页码按钮逻辑...

  html += `
    <button ${currentPage === totalPages ? 'disabled' : ''} onclick="changePage(${currentPage + 1})">下一页</button>
    <button ${currentPage === totalPages ? 'disabled' : ''} onclick="changePage(${totalPages})">末页</button>
  `;

  document.getElementById('pagination').innerHTML = html;
}