当前位置：首页 > JavaScript

分页实现js

2026-03-14 19:42:50JavaScript

分页实现的基本原理

分页功能通常用于数据量较大的场景，将数据分割成多个页面展示。核心逻辑包括计算总页数、当前页数据切片、页码按钮生成等。

分页实现js

纯前端分页实现

假设已有完整数据数组，仅需前端分页展示：

分页实现js

// 示例数据
const allData = [...Array(100).keys()].map(i => ({ id: i, name: `Item ${i}` }));

// 分页配置
const paginate = (data, currentPage = 1, perPage = 10) => {
  const totalItems = data.length;
  const totalPages = Math.ceil(totalItems / perPage);
  const startIdx = (currentPage - 1) * perPage;
  const paginatedData = data.slice(startIdx, startIdx + perPage);

  return {
    currentPage,
    perPage,
    totalPages,
    totalItems,
    data: paginatedData
  };
};

// 使用示例
const result = paginate(allData, 2);
console.log(result.data); // 获取第二页数据

动态渲染分页控件

function renderPagination(totalPages, currentPage) {
  const container = document.getElementById('pagination');
  container.innerHTML = '';

  // 上一页按钮
  if (currentPage > 1) {
    const prevBtn = document.createElement('button');
    prevBtn.textContent = 'Previous';
    prevBtn.addEventListener('click', () => updatePage(currentPage - 1));
    container.appendChild(prevBtn);
  }

  // 页码按钮
  for (let i = 1; i <= totalPages; i++) {
    const pageBtn = document.createElement('button');
    pageBtn.textContent = i;
    if (i === currentPage) {
      pageBtn.classList.add('active');
    }
    pageBtn.addEventListener('click', () => updatePage(i));
    container.appendChild(pageBtn);
  }

  // 下一页按钮
  if (currentPage < totalPages) {
    const nextBtn = document.createElement('button');
    nextBtn.textContent = 'Next';
    nextBtn.addEventListener('click', () => updatePage(currentPage + 1));
    container.appendChild(nextBtn);
  }
}

结合AJAX的后端分页

当数据量非常大时，建议采用后端分页：

async function fetchPaginatedData(page = 1, size = 10) {
  const response = await fetch(`/api/items?page=${page}&size=${size}`);
  const { data, total } = await response.json();

  renderData(data);
  renderPagination(Math.ceil(total / size), page);
}

// 调用示例
fetchPaginatedData(1);

分页组件优化建议

添加页码省略功能（当页数过多时显示...）
支持自定义每页显示数量
加入加载状态指示器
实现URL同步（保持浏览器地址栏与当前页码同步）

// URL同步示例
function updatePage(page) {
  window.history.pushState({}, '', `?page=${page}`);
  fetchPaginatedData(page);
}

// 监听popstate事件
window.addEventListener('popstate', () => {
  const urlParams = new URLSearchParams(window.location.search);
  const page = urlParams.get('page') || 1;
  fetchPaginatedData(page);
});

常见分页样式实现

对于不同的UI需求，可以调整分页控件的样式：

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

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

以上代码提供了从基础到进阶的分页实现方案，可根据实际项目需求进行调整和扩展。