当前位置：首页 > JavaScript

js 分页实现

2026-03-14 11:22:19JavaScript

分页实现方法

分页是Web开发中常见的功能，用于将大量数据分成多个页面展示。以下是几种常见的JavaScript分页实现方法。

客户端分页

客户端分页适用于数据量较小的情况，所有数据一次性加载到前端，通过JavaScript进行分页处理。

实现步骤

获取所有数据并存储在数组中。
定义每页显示的数据量和当前页码。
根据当前页码和每页数据量，计算当前页的数据范围。
使用数组的slice方法截取当前页的数据。

const data = [...]; // 所有数据
const itemsPerPage = 10; // 每页显示的数据量
let currentPage = 1; // 当前页码

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

服务器端分页

服务器端分页适用于数据量较大的情况，每次只请求当前页的数据，减轻前端负担。

实现步骤

前端发送请求时携带页码和每页数据量参数。
后端根据参数返回对应的数据。
前端接收数据并渲染。

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

分页控件实现

分页控件通常包括页码按钮、上一页和下一页按钮，以及总页数显示。

实现步骤

计算总页数：totalPages = Math.ceil(totalItems / itemsPerPage)。
生成页码按钮，绑定点击事件切换当前页码。
更新分页控件状态，高亮当前页码。

function renderPagination(totalItems, itemsPerPage, currentPage) {
  const totalPages = Math.ceil(totalItems / itemsPerPage);
  const paginationElement = 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>`;
  }

  paginationElement.innerHTML = html;
}

function changePage(page) {
  currentPage = page;
  // 重新加载数据或更新页面
}

动态分页加载

动态分页加载结合了无限滚动和分页的优点，滚动到页面底部时自动加载下一页数据。

实现步骤

js 分页实现

监听页面滚动事件，判断是否滚动到底部。
加载下一页数据并追加到当前页面。
避免重复加载和性能问题。

window.addEventListener('scroll', () => {
  if (window.innerHeight + window.scrollY >= document.body.offsetHeight) {
    loadNextPage();
  }
});

async function loadNextPage() {
  if (isLoading) return;
  isLoading = true;
  currentPage++;
  const data = await fetchPaginatedData(currentPage, itemsPerPage);
  renderData(data);
  isLoading = false;
}