当前位置：首页 > JavaScript

js前端实现分页

2026-01-30 17:19:17JavaScript

分页实现方法

基于数组的分页

假设有一个数据数组需要分页显示，可以通过以下方式实现：

const data = [...]; // 原始数据数组
const pageSize = 10; // 每页显示数量
let currentPage = 1; // 当前页码

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

分页组件实现

创建一个分页UI组件，通常包含页码按钮和导航控制：

function renderPagination(totalItems, pageSize, currentPage) {
  const totalPages = Math.ceil(totalItems / pageSize);
  const paginationContainer = document.getElementById('pagination');

  let html = '';
  if (currentPage > 1) {
    html += `<button onclick="changePage(${currentPage - 1})">上一页</button>`;
  }

  for (let i = 1; i <= totalPages; i++) {
    html += `<button class="${i === currentPage ? 'active' : ''}" 
             onclick="changePage(${i})">${i}</button>`;
  }

  if (currentPage < totalPages) {
    html += `<button onclick="changePage(${currentPage + 1})">下一页</button>`;
  }

  paginationContainer.innerHTML = html;
}

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

结合API的分页

当数据来自后端API时，可以这样处理：

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

完整示例

整合数据获取和分页显示的完整流程：

let currentPage = 1;
const pageSize = 10;

async function updateDisplay() {
  const { data, total } = await fetchPaginatedData(currentPage, pageSize);
  renderData(data);
  renderPagination(total, pageSize, currentPage);
}

function renderData(items) {
  const container = document.getElementById('data-container');
  container.innerHTML = items.map(item => `
    <div class="item">${item.name}</div>
  `).join('');
}

分页样式优化

为分页按钮添加基本CSS样式：

#pagination button {
  margin: 0 5px;
  padding: 5px 10px;
  border: 1px solid #ddd;
  background: #fff;
  cursor: pointer;
}

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