Create Pagination in JavaScript with an Array of Objects and loop through the Array-CodePudding

How could I create a Pagination System in JavaScript? There should be 10 products per page.

I have created an Array of products. I want to loop through all of these products and dsiplay the first 10 products on the first page, and then the next 10 products on the next page.

I have created this Array:

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

I have looped through all of the products and displayed them on screen like this:

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);
}

I want to do this in Vanilla JavaScript

The program should loop through all of the objects and display the first 10 objects on the first page and the next 10 objects on the next page. I should not need to create a seperate page for each 10 objects.

I have already found a qusetion on this topic. However, the question does not include looping through the objects.

CodePudding user response：

You could do this :

HTML

<html>
  <body>
    <div id="products" ></div>
    <div >
      <span id="prev-page" >&lt; Prev</span>
      <span id="page-number"></span>
      <span id="next-page" >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);
});

CodePudding user response：

You can try this code snippet

let items = [
{id: 1, name: "Item 1"},
{id: 2, name: "Item 2"},
{id: 3, name: "Item 3"},
...
];

const itemsPerPage = 3;
let currentPage = 1;

function displayPage(page) {
let startIndex = (page - 1) * itemsPerPage;
let endIndex = startIndex   itemsPerPage;
let pageItems = items.slice(startIndex, endIndex);

console.log(pageItems);
}

displayPage(currentPage);