如何用Vanilla JavaScript实现对象数组的分页功能（每页10条）

核心实现思路 #

要实现无刷新分页，核心是维护当前页码状态，根据页码计算需展示的产品范围，遍历对应范围的产品对象生成DOM，同时生成分页导航按钮切换页码。具体步骤：

1. 定义分页基础配置（每页数量、当前页码）
2. 编写渲染指定页产品的函数，遍历目标产品对象数组生成卡片
3. 生成分页按钮并绑定切换事件，点击后更新页码并重新渲染
4. 初始化页面时渲染第一页并生成分页控件

完整代码实现 #

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" },
        // 更多产品...
    ]
};

// 分页配置
const itemsPerPage = 10;
let currentPage = 1;

// 获取页面容器
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);

    // 遍历当前页的产品对象（核心遍历逻辑）
    for (const product of currentProducts) {
        // 创建产品卡片DOM
        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);

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

    // 页码按钮
    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);
    }

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

// 初始化页面
renderProducts(currentPage);
renderPagination();

可选自定义样式

.product-card {
    border: 1px solid #eee;
    padding: 12px;
    margin: 8px;
    display: inline-block;
    min-width: 120px;
}
#pagination button {
    margin: 0 4px;
    padding: 6px 12px;
    cursor: pointer;
}
#pagination button.active {
    background-color: #2196F3;
    color: #fff;
    border: none;
    border-radius: 4px;
}
#pagination button:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

代码说明 #

1. 状态管理：用currentPage记录当前页码，itemsPerPage固定每页10个产品，通过索引计算当前页的产品范围。
2. 对象遍历逻辑：在renderProducts函数中，使用for...of遍历当前页的产品对象，逐个创建DOM元素，完全覆盖你需要的对象遍历需求。
3. 分页控件：自动计算总页数，生成上一页、页码、下一页按钮，添加禁用逻辑防止越界，点击后更新页码并重新渲染对应内容。
4. 初始化：页面加载时直接渲染第一页产品和分页按钮，完成初始展示。

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