如何用Vanilla JavaScript实现基于对象数组的分页功能

实现思路 #

• 定义核心参数：当前页码、每页展示数量
• 编写渲染指定页产品的函数，利用数组slice方法截取对应区间的产品
• 编写分页按钮生成函数，根据总产品数计算总页数，动态创建页码按钮
• 给分页按钮绑定点击事件，切换页码并重新渲染产品

完整代码实现 #

首先确保HTML结构包含两个关键容器：

<!-- 产品展示容器 -->
<div id="products"></div>
<!-- 分页按钮容器 -->
<div id="pagination"></div>

JavaScript代码如下：

// 你的产品数据（示例补充完整）
let products = {
    data: [
        { productName: "Product1" },
        { productName: "Product2" },
        { productName: "Product3" },
        { productName: "Product4" },
        { productName: "Product5" },
        { productName: "Product6" },
        { productName: "Product7" },
        { productName: "Product8" },
        { productName: "Product9" },
        { productName: "Product10" },
        { productName: "Product11" },
        { productName: "Product12" },
        { productName: "Product13" },
        { productName: "Product14" },
        { productName: "Product15" },
        { productName: "Product16" },
        { productName: "Product17" },
        { productName: "Product18" },
        { productName: "Product19" },
        { productName: "Product20" },
        { productName: "Product21" }
    ]
};

// 核心参数
const itemsPerPage = 10;
let currentPage = 1;

// 获取DOM元素
const productsContainer = document.getElementById('products');
const paginationContainer = document.getElementById('pagination');

// 渲染指定页的产品
function renderProducts(page) {
    // 清空容器避免重复渲染
    productsContainer.innerHTML = '';
    // 计算当前页产品的起始/结束索引
    const startIndex = (page - 1) * itemsPerPage;
    const endIndex = startIndex + itemsPerPage;
    // 截取当前页的产品数组
    const currentProducts = products.data.slice(startIndex, endIndex);

    // 遍历生成产品卡片
    currentProducts.forEach(product => {
        const card = document.createElement('div');
        card.classList.add('product-card'); // 可自定义样式类
        const name = document.createElement('h5');
        name.textContent = product.productName;
        card.appendChild(name);
        productsContainer.appendChild(card);
    });
}

// 生成分页按钮
function renderPagination() {
    paginationContainer.innerHTML = '';
    // 计算总页数
    const totalPages = Math.ceil(products.data.length / itemsPerPage);

    // 遍历创建页码按钮
    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', () => {
            currentPage = i;
            renderProducts(currentPage);
            renderPagination(); // 更新分页按钮激活状态
        });
        paginationContainer.appendChild(pageBtn);
    }
}

// 初始化加载第一页内容
renderProducts(currentPage);
renderPagination();

代码说明 #

• renderProducts函数：通过slice精准截取当前页需要展示的10个产品，每次渲染前清空容器，避免重复内容。
• renderPagination函数：根据总产品数计算总页数，动态生成对应页码按钮，点击时切换当前页并重新渲染产品和分页控件，同时标记当前激活的页码。
• 初始化时直接调用两个渲染函数，默认展示第一页内容和分页按钮。

可选优化 #

• 添加「上一页/下一页」按钮，提升操作便捷性
• 给产品卡片和分页按钮添加CSS样式，优化视觉效果
• 若产品数据量极大，可结合懒加载进一步优化性能

内容的提问来源于stack exchange，提问作者user21104210