JavaScript 分页功能实现教程：从原理到代码实践

2026-03-11 06:10:02 2919阅读

在 Web 开发中，当我们处理大量数据时，分页功能是必不可少的。它能提升用户体验，避免页面加载过慢。本文将详细介绍如何使用 JavaScript 实现分页功能。

分页功能的基本原理

分页的核心思想是将大量数据分成多个页面展示。用户可以通过点击页码或前后翻页按钮来切换不同页面。实现分页功能主要涉及以下几个步骤：

数据分组：将原始数据按照每页显示的数量进行分组。
页码计算：根据数据总量和每页显示数量计算总页数。
页面渲染：根据当前页码，从分组数据中取出对应的数据并展示在页面上。
交互控制：实现页码切换、前后翻页等交互功能。

实现步骤

1. HTML 结构

首先，我们需要创建一个基本的 HTML 结构，用于展示数据和分页导航。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript 分页功能</title>
</head>

<body>
    <!-- 数据展示区域 -->
    <div id="data-container"></div>
    <!-- 分页导航区域 -->
    <div id="pagination-container"></div>

    <script src="script.js"></script>
</body>

</html>

2. JavaScript 代码实现

数据准备

假设我们有一组数据，需要将其进行分页展示。

// 模拟数据
const data = Array.from({ length: 100 }, (_, index) => `Item ${index + 1}`);
// 每页显示的数量
const itemsPerPage = 10;
// 当前页码，默认为第一页
let currentPage = 1;

数据分组和分页计算

根据每页显示数量对数据进行分组，并计算总页数。

// 计算总页数
function getTotalPages() {
    return Math.ceil(data.length / itemsPerPage);
}

// 根据页码获取当前页的数据
function getPageData(page) {
    const startIndex = (page - 1) * itemsPerPage;
    const endIndex = startIndex + itemsPerPage;
    return data.slice(startIndex, endIndex);
}

页面渲染

将当前页的数据渲染到页面上，并更新分页导航。

// 渲染数据
function renderData() {
    const dataContainer = document.getElementById('data-container');
    dataContainer.innerHTML = '';
    const pageData = getPageData(currentPage);
    pageData.forEach(item => {
        const div = document.createElement('div');
        div.textContent = item;
        dataContainer.appendChild(div);
    });
}

// 渲染分页导航
function renderPagination() {
    const paginationContainer = document.getElementById('pagination-container');
    paginationContainer.innerHTML = '';
    const totalPages = getTotalPages();

    // 上一页按钮
    const prevButton = document.createElement('button');
    prevButton.textContent = 'Previous';
    prevButton.disabled = currentPage === 1;
    prevButton.addEventListener('click', () => {
        if (currentPage > 1) {
            currentPage--;
            renderData();
            renderPagination();
        }
    });
    paginationContainer.appendChild(prevButton);

    // 页码按钮
    for (let i = 1; i <= totalPages; i++) {
        const pageButton = document.createElement('button');
        pageButton.textContent = i;
        pageButton.classList.toggle('active', i === currentPage);
        pageButton.addEventListener('click', () => {
            currentPage = i;
            renderData();
            renderPagination();
        });
        paginationContainer.appendChild(pageButton);
    }

    // 下一页按钮
    const nextButton = document.createElement('button');
    nextButton.textContent = 'Next';
    nextButton.disabled = currentPage === totalPages;
    nextButton.addEventListener('click', () => {
        if (currentPage < totalPages) {
            currentPage++;
            renderData();
            renderPagination();
        }
    });
    paginationContainer.appendChild(nextButton);
}

初始化页面

在页面加载完成后，调用渲染函数进行初始化。

// 初始化页面
function init() {
    renderData();
    renderPagination();
}

window.addEventListener('load', init);

代码解释

数据准备：我们创建了一个包含 100 个元素的数组 data，并设置每页显示 10 条数据。
数据分组和分页计算：getTotalPages 函数根据数据总量和每页显示数量计算总页数。getPageData 函数根据当前页码获取对应的数据。
页面渲染：renderData 函数将当前页的数据渲染到页面上。renderPagination 函数生成页码按钮和前后翻页按钮，并为它们添加点击事件。
初始化页面：init 函数在页面加载完成后调用 renderData 和 renderPagination 函数进行初始化。