如何利用现有分页系统展示对象数组并实现分页控制按钮？

第一步：调整卡片渲染函数 #

先修改createCards函数，每次渲染前清空目标容器，避免重复添加卡片：

function createCards(products) {
  const productsContainer = document.getElementById("products");
  // 清空容器，避免重复渲染
  productsContainer.innerHTML = "";
  
  for (let i of products) {
    // 创建卡片
    const card = document.createElement("div");
    card.classList.add("card", i.category);
    // 图片容器
    const imgContainer = document.createElement("div");
    imgContainer.classList.add("image-container");
    const image = document.createElement("img");
    image.setAttribute("src", i.image);
    imgContainer.appendChild(image);
    card.appendChild(imgContainer);
    // 信息容器
    const container = document.createElement("div");
    container.classList.add("container");
    // 商品名称
    const name = document.createElement("h5");
    name.classList.add("product-name");
    name.innerText = i.productName.toUpperCase();
    container.appendChild(name);
    // 价格
    const price = document.createElement("h6");
    price.innerText = "$" + i.price;
    container.appendChild(price);

    card.appendChild(container);
    productsContainer.appendChild(card);
  }
}

第二步：创建分页控件生成函数 #

生成上一页、下一页和页码按钮，并绑定点击事件：

function renderPaginationControls(paginationData) {
  const paginationContainer = document.getElementById("pagination");
  paginationContainer.innerHTML = "";

  // 上一页按钮
  const prevBtn = document.createElement("button");
  prevBtn.textContent = "上一页";
  prevBtn.disabled = !paginationData.pre_page;
  prevBtn.addEventListener("click", () => {
    if (paginationData.pre_page) {
      renderPage(paginationData.pre_page);
    }
  });
  paginationContainer.appendChild(prevBtn);

  // 页码按钮
  for (let i = 1; i <= paginationData.total_pages; i++) {
    const pageBtn = document.createElement("button");
    pageBtn.textContent = i;
    // 高亮当前页码
    if (i === paginationData.page) {
      pageBtn.classList.add("active");
    }
    pageBtn.addEventListener("click", () => {
      renderPage(i);
    });
    paginationContainer.appendChild(pageBtn);
  }

  // 下一页按钮
  const nextBtn = document.createElement("button");
  nextBtn.textContent = "下一页";
  nextBtn.disabled = !paginationData.next_page;
  nextBtn.addEventListener("click", () => {
    if (paginationData.next_page) {
      renderPage(paginationData.next_page);
    }
  });
  paginationContainer.appendChild(nextBtn);
}

第三步：整合分页与渲染核心逻辑 #

创建renderPage函数，串联分页计算、卡片渲染和控件更新：

// 全局配置：每页数量和数据源
const PER_PAGE = 2; // 可按需调整
const myProducts = [
  { productName: "商品1", category: "电子", price: "30", image: "images/main_img.jpg" },
  { productName: "商品2", category: "电子", price: "40", image: "images/main_img.jpg" },
  { productName: "商品3", category: "服饰", price: "50", image: "images/main_img.jpg" },
  { productName: "商品4", category: "服饰", price: "60", image: "images/main_img.jpg" },
  { productName: "商品5", category: "家居", price: "70", image: "images/main_img.jpg" },
]; // 替换为你的实际数据

function renderPage(page) {
  const paginationData = paginator(myProducts, page, PER_PAGE);
  createCards(paginationData.data);
  renderPaginationControls(paginationData);
}

第四步：补充HTML结构 #

在HTML中添加卡片容器和分页控件容器：

<div id="products"></div>
<div id="pagination"></div>

第五步：初始化页面 #

页面加载完成后自动渲染第一页：

document.addEventListener("DOMContentLoaded", () => {
  renderPage(1);
});

可选：分页按钮基础样式 #

添加CSS优化分页按钮的视觉效果：

#pagination button {
  margin: 0 5px;
  padding: 5px 10px;
  cursor: pointer;
}

#pagination button.active {
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 3px;
}

#pagination button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

完成以上步骤后，点击分页按钮即可切换页面，自动渲染对应页的卡片，同时分页控件会同步更新状态（禁用不可点击的按钮、高亮当前页码）。

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