使用对象数组在 JavaScript 中创建分页并循环遍历数组答案

【问题标题】：Create Pagination in JavaScript with an Array of Objects and loop through the Array使用对象数组在 JavaScript 中创建分页并循环遍历数组
【发布时间】：2023-02-02 23:39:55
【问题描述】：

我如何在 JavaScript 中创建分页系统？每页应该有 10 个产品。

我创建了一系列产品。我想遍历所有这些产品并在第一页显示前 10 个产品，然后在下一页显示接下来的 10 个产品。

我创建了这个数组：

let products = {
    data: [
      {
        productName: "Product1",
      },
      {
        productName: "Product2",
      },
      {
        productName: "Product3",
      },
      {
        productName: "Product4",
      },
      {
        productName: "Product5",
      },
      {
        multiple other products
      },
],
};

我已经遍历了所有产品并将它们显示在屏幕上，如下所示：

for (let i of products.data) {
    let card = document.createElement("div");
    let name = document.createElement("h5");
    container.appendChild(name);
    card.appendChild(container);
    document.getElementById("products").appendChild(card);
}

我想在 Vanilla JavaScript 中做这个

该程序应遍历所有对象并在第一页显示前 10 个对象，在下一页显示接下来的 10 个对象。我不需要为每 10 个对象创建一个单独的页面。

我已经找到了关于这个话题的问题。但是，问题不包括遍历对象。

【问题讨论】：

标签： javascript arrays loops object pagination

【解决方案1】：

你可以这样做：

HTML

<html>
  <body>
    <div id="products" class="container"></div>
    <div class="pagination">
      <span id="prev-page" class="page-link">&lt; Prev</span>
      <span id="page-number"></span>
      <span id="next-page" class="page-link">Next &gt;</span>
    </div>
  </body>
 </html>

CSS

 .container {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
      }

.pagination {
        display: flex;
        justify-content: center;
        margin-top: 20px;
      }

.card {
  display: inline-block;
  width: 150px;
  height: 200px;
  margin: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  text-align: center;
  vertical-align: top;
  box-shadow: 2px 2px 3px #ccc;
}

.card h5 {
  margin: 10px;
}

#pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50px;
  margin: 20px 0;
}

  .page-link {
        margin: 0 10px;
        padding: 5px 10px;
        background-color: #eee;
        border-radius: 10px;
        cursor: pointer;
      }

#pagination button {
  padding: 10px 20px;
  border-radius: 5px;
  background-color: #ccc;
  border: none;
  cursor: pointer;
  margin: 0 10px;
}

#pagination #page-number {
  display: inline-block;
  margin: 0 10px;
}

#pagination button:hover {
  background-color: #ddd;
}

let products = {
      data: [
        {
          productName: "Product 1",
        },
        {
          productName: "Product 2",
        },
        {
          productName: "Product 3",
        },
        {
          productName: "Product 4",
        },
        {
          productName: "Product 5",
        },
        {
          productName: "Product 6",
        },
        {
          productName: "Product 7",
        },
        {
          productName: "Product 8",
        },
        {
          productName: "Product 9",
        },
        {
          productName: "Product 10",
        },
        {
          productName: "Product 11",
        },
        {
          productName: "Product 12",
        },
        {
          productName: "Product 13",
        },
        {
          productName: "Product 14",
        },
        {
          productName: "Product 15",
        },
        {
          productName: "Product 16",
        },
        {
          productName: "Product 17",
        },
        {
          productName: "Product 18",
        },
        {
          productName: "Product 19",
        },
        {
          productName: "Product 20",
        },
        {
          productName: "Product 21",
        },
      ],
    };

let itemsPerPage = 10;

function renderProducts(page) {
  let startIndex = (page - 1) * itemsPerPage;
  let endIndex = startIndex + itemsPerPage;
  let productsToRender = products.data.slice(startIndex, endIndex);
  let productsContainer = document.getElementById("products");
  productsContainer.innerHTML = "";
  for (let product of productsToRender) {
    let card = document.createElement("div");
    card.classList.add("card");
    let name = document.createElement("h5");
    name.innerText = product.productName;
    card.appendChild(name);
    productsContainer.appendChild(card);
  }
}

function renderPagination(page) {
  let pageNumber = document.getElementById("page-number");
  pageNumber.innerText = `Page ${page}`;

  let prevPage = document.getElementById("prev-page");
  let nextPage = document.getElementById("next-page");

  prevPage.style.display = "inline-block";
  nextPage.style.display = "inline-block";

  if (page === 1) {
    prevPage.style.display = "none";
  }

  if (page === Math.ceil(products.data.length / itemsPerPage)) {
    nextPage.style.display = "none";
  }
}

let currentPage = 1;
renderProducts(currentPage);
renderPagination(currentPage);

document.getElementById("prev-page").addEventListener("click", function () {
  currentPage--;
  renderProducts(currentPage);
  renderPagination(currentPage);
});

document.getElementById("next-page").addEventListener("click", function () {
  currentPage++;
  renderProducts(currentPage);
  renderPagination(currentPage);
});

【讨论】：