当前位置：首页 > JavaScript

js实现分页

2026-02-28 17:19:40JavaScript

实现分页的基本思路

分页功能通常涉及前端展示和数据分割。核心逻辑是将大量数据拆分为多个页面显示，通过页码或按钮切换不同数据块。

纯前端分页实现

适用于数据量较小且已全部加载到前端的情况：

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

const allData = [...]; // 完整数据集
const currentPage = 1;
const pageSize = 10;
const pageData = paginateData(allData, currentPage, pageSize);

分页控件渲染

创建可交互的分页UI组件：

function renderPagination(totalItems, currentPage, itemsPerPage, containerId) {
  const totalPages = Math.ceil(totalItems / itemsPerPage);
  let html = `<ul class="pagination">`;

  // 上一页按钮
  html += `<li ${currentPage <= 1 ? 'class="disabled"' : ''}>
    <a href="#" onclick="changePage(${currentPage - 1})">«</a>
  </li>`;

  // 页码按钮
  for (let i = 1; i <= totalPages; i++) {
    html += `<li ${i === currentPage ? 'class="active"' : ''}>
      <a href="#" onclick="changePage(${i})">${i}</a>
    </li>`;
  }

  // 下一页按钮
  html += `<li ${currentPage >= totalPages ? 'class="disabled"' : ''}>
    <a href="#" onclick="changePage(${currentPage + 1})">»</a>
  </li>`;

  html += `</ul>`;
  document.getElementById(containerId).innerHTML = html;
}

function changePage(newPage) {
  // 实际应用中这里应重新获取数据或更新显示
  console.log(`切换到页码: ${newPage}`);
}

结合API的分页实现

实际项目中更常见的后端分页方式：

async function fetchPaginatedData(page, size) {
  try {
    const response = await fetch(`/api/data?page=${page}&size=${size}`);
    const { data, total } = await response.json();
    return { data, total };
  } catch (error) {
    console.error('获取分页数据失败:', error);
    return { data: [], total: 0 };
  }
}

// 使用示例
const { data, total } = await fetchPaginatedData(1, 10);
renderPagination(total, 1, 10, 'pagination-container');

分页样式建议

基本CSS样式可增强用户体验：

.pagination {
  display: flex;
  list-style: none;
  padding: 0;
}

.pagination li {
  margin: 0 5px;
}

.pagination li a {
  padding: 8px 12px;
  border: 1px solid #ddd;
  text-decoration: none;
  color: #333;
}

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

.pagination li.disabled a {
  color: #ccc;
  pointer-events: none;
}

性能优化考虑

对于大型数据集，建议采用虚拟滚动或无限滚动替代传统分页。以下为虚拟滚动简化示例：

function setupVirtualScroll(containerId, itemHeight, totalItems, renderItem) {
  const container = document.getElementById(containerId);
  container.onscroll = () => {
    const scrollTop = container.scrollTop;
    const startIdx = Math.floor(scrollTop / itemHeight);
    const endIdx = Math.min(
      startIdx + Math.ceil(container.clientHeight / itemHeight),
      totalItems
    );

    // 只渲染可见区域的项目
    const visibleItems = Array.from({length: endIdx - startIdx}, (_, i) => 
      renderItem(startIdx + i)
    );
    container.innerHTML = '';
    container.append(...visibleItems);

    // 设置容器高度维持滚动条比例
    container.style.height = `${totalItems * itemHeight}px`;
  };
}

以上实现方案可根据实际需求组合使用，前端分页适合小型静态数据集，API分页适合动态大数据量场景，虚拟滚动则能优化超大数据集的性能表现。

js实现分页