当前位置：首页 > JavaScript

js 分页实现

2026-04-06 05:21:09JavaScript

前端分页实现方法

客户端分页（纯前端） 适用于数据量较小且已全部加载到前端的情况。

将数据数组按每页显示条数分割：

function paginate(array, pageSize, pageNumber) {
  return array.slice((pageNumber - 1) * pageSize, pageNumber * pageSize);
}
const data = [...]; // 总数据
const pageData = paginate(data, 10, 1); // 每页10条，获取第1页

DOM元素分页 隐藏非当前页元素：

function showPage(pageNumber) {
  const items = document.querySelectorAll('.item');
  items.forEach((item, index) => {
    item.style.display = 
      (index >= (pageNumber-1)*10 && index < pageNumber*10) 
      ? 'block' : 'none';
  });
}

后端分页实现方法

AJAX请求分页 通过API获取分页数据：

async function fetchPage(page, size) {
  const response = await fetch(`/api/data?page=${page}&size=${size}`);
  return response.json();
}

// 使用示例
fetchPage(1, 10).then(data => {
  renderTable(data.items);
  renderPagination(data.totalPages);
});

URL参数分页 通过路由参数控制分页：

// 监听路由变化
window.addEventListener('popstate', updatePageFromURL);

function updatePageFromURL() {
  const params = new URLSearchParams(window.location.search);
  const page = parseInt(params.get('page')) || 1;
  loadPage(page);
}

分页组件实现

基础分页控件 创建可交互的分页UI：

function createPagination(totalPages, currentPage) {
  let html = '<div class="pagination">';
  for (let i = 1; i <= totalPages; i++) {
    html += `<button class="${i === currentPage ? 'active' : ''}">${i}</button>`;
  }
  html += '</div>';
  return html;
}

完整示例

class Paginator {
  constructor(container, options) {
    this.container = document.querySelector(container);
    this.pageSize = options.pageSize || 10;
    this.currentPage = 1;
    this.data = options.data || [];
    this.render();
  }

  render() {
    const pageData = this.paginate();
    this.container.innerHTML = `
      <div class="data-container">${this.renderItems(pageData)}</div>
      <div class="pagination">${this.renderPagination()}</div>
    `;
    this.bindEvents();
  }

  paginate() {
    return this.data.slice(
      (this.currentPage - 1) * this.pageSize,
      this.currentPage * this.pageSize
    );
  }
}

性能优化技巧

虚拟滚动 处理大量数据时替代分页：

new VirtualScroll({
  container: '#scroll-container',
  rowHeight: 30,
  renderRow: (index) => {
    return `<div>Row ${index + 1}</div>`;
  },
  totalRows: 10000
});

缓存策略 存储已加载的页面数据：

const pageCache = {};

async function getPage(page) {
  if (pageCache[page]) return pageCache[page];

  const data = await fetchPage(page);
  pageCache[page] = data;
  return data;
}

分页样式示例

CSS样式建议

js 分页实现

.pagination {
  display: flex;
  gap: 5px;
  margin-top: 20px;
}
.pagination button {
  padding: 5px 10px;
  border: 1px solid #ddd;
  background: white;
}
.pagination button.active {
  background: #007bff;
  color: white;
}

以上方法可根据实际需求组合使用，前端分页适合数据量小的场景，后端分页适合大数据量情况。虚拟滚动可作为分页的替代方案处理超大数据集。