如何在JavaScript中实现分页功能

在前端开发中，当接口返回大量数据或者需要展示长列表时，一次性渲染所有内容会导致页面加载缓慢、用户体验下降。分页功能可以将数据拆分到多个页面展示，既能减少单次渲染的压力，也能让用户更清晰地浏览内容。下面我们就来介绍两种常见的JavaScript分页实现方式。

一、前端本地分页实现

前端本地分页适用于数据量不大、一次性从接口获取全部数据的场景。核心思路是先拿到完整的数组数据，再通过计算当前页码和每页展示数量，截取对应区间的数据进行渲染。

1. 基础实现代码

下面的示例实现了本地数据分页的核心逻辑，包含页码切换、数据截取和简单渲染：

// 模拟从接口获取的全部数据
const allData = [];
for (let i = 1; i <= 50; i++) {
  allData.push(`第${i}条数据内容`);
}

// 分页配置
const pageSize = 10; // 每页展示10条数据
let currentPage = 1; // 当前页码，默认第一页
const totalPage = Math.ceil(allData.length / pageSize); // 计算总页数

// 截取当前页对应的数据
function getCurrentPageData(page) {
  // 边界校验，确保页码在有效范围内
  if (page < 1) page = 1;
  if (page > totalPage) page = totalPage;
  currentPage = page;
  // 计算起始和结束索引
  const startIdx = (page - 1) * pageSize;
  const endIdx = startIdx + pageSize;
  return allData.slice(startIdx, endIdx);
}

// 渲染数据到页面
function renderData() {
  const dataContainer = document.getElementById('data-container');
  const pageInfo = document.getElementById('page-info');
  // 获取当前页数据
  const currentData = getCurrentPageData(currentPage);
  // 清空容器原有内容
  dataContainer.innerHTML = '';
  // 渲染数据列表
  currentData.forEach(item => {
    const li = document.createElement('li');
    li.textContent = item;
    dataContainer.appendChild(li);
  });
  // 更新页码信息
  pageInfo.textContent = `当前第${currentPage}页，共${totalPage}页`;
}

// 页码切换函数
function changePage(type) {
  if (type === 'prev') {
    currentPage--;
  } else if (type === 'next') {
    currentPage++;
  }
  renderData();
}

// 初始化渲染
renderData();

2. 对应HTML结构

配合上面的JS逻辑，需要准备如下的HTML结构，用于展示数据和操作按钮：

<div class="pagination-demo">
  <ul id="data-container"></ul>
  <div class="page-control">
    <button onclick="changePage('prev')">上一页</button>
    <span id="page-info"></span>
    <button onclick="changePage('next')">下一页</button>
  </div>
</div>

二、后端接口分页实现

当数据量极大时，前端本地分页不再适用，需要配合后端接口实现分页。此时前端只需要传递当前页码和每页数量给后端，由后端返回对应页的数据和总页数等信息，前端拿着返回数据直接渲染即可。

1. 实现代码

下面的示例模拟了调用后端分页接口的逻辑，使用fetch发送请求，处理返回的分页数据：

// 分页配置
let currentPage = 1;
const pageSize = 10;
let totalPage = 0;

// 请求后端分页接口，这里模拟请求地址为http://ipipp.com/api/list
function fetchPageData(page) {
  // 边界校验
  if (page < 1) page = 1;
  if (totalPage > 0 && page > totalPage) page = totalPage;
  currentPage = page;
  // 拼接请求参数，传递当前页码和每页数量
  const url = `http://ipipp.com/api/list?page=${currentPage}&pageSize=${pageSize}`;
  fetch(url)
    .then(res => res.json())
    .then(res => {
      if (res.code === 0) {
        // 假设接口返回格式为 { code: 0, data: { list: [], totalPage: 5 } }
        const { list, totalPage: pageNum } = res.data;
        totalPage = pageNum;
        renderPageData(list);
        updatePageInfo();
      }
    })
    .catch(err => {
      console.error('请求分页数据失败：', err);
    });
}

// 渲染接口返回的数据
function renderPageData(list) {
  const dataContainer = document.getElementById('data-container');
  dataContainer.innerHTML = '';
  list.forEach(item => {
    const li = document.createElement('li');
    li.textContent = item.name || item.content; // 根据实际返回字段调整
    dataContainer.appendChild(li);
  });
}

// 更新页码信息
function updatePageInfo() {
  const pageInfo = document.getElementById('page-info');
  pageInfo.textContent = `当前第${currentPage}页，共${totalPage}页`;
}

// 页码切换
function changePageByApi(type) {
  if (type === 'prev') {
    fetchPageData(currentPage - 1);
  } else if (type === 'next') {
    fetchPageData(currentPage + 1);
  }
}

// 初始化请求第一页数据
fetchPageData(1);

2. 注意事项

使用后端分页时，需要注意几个问题：一是接口返回的总页数、总条数等字段需要和前端约定好格式，避免解析错误；二是请求接口时最好添加加载状态提示，避免用户重复点击切换页码；三是如果接口需要鉴权，要在请求头中携带对应的token等凭证。

三、两种分页方式的对比

我们可以把两种分页方式的特点整理成表格，方便根据场景选择：

实际开发中可以根据数据规模和项目需求选择合适的分页实现方式，也可以结合两种方式的思路，在数据量中等时做前端缓存，减少重复请求，提升用户体验。

JavaScript分页前端本地分页后端接口分页数据渲染分页实现 本作品最后修改时间：2026-05-23 23:03:25