I am dealing with an Array of Objects:
const myArray = [
{myObject: "1"},
{myObject: "2"},
{myObject: "3"},
{myObject: "4"},
{myObject: "5"},
]
To implement a pagination system for these Objects, I have come up with the following code:
function paginateData (items, currentPage, itemsPerPage) {
let offset = (currentPage - 1) * itemsPerPage;
let paginatedItems = items.slice(offset).slice(0, itemsPerPage);
let total_pages = Math.ceil(items.length / itemsPerPage);
return {
currentPage: currentPage,
itemsPerPage: itemsPerPage,
previousPage: currentPage - 1 ? currentPage - 1 : null,
nextPage: (total_pages > currentPage) ? currentPage + 1 : null,
totalItems: items.length,
totalPages: total_pages,
data: paginatedItems
};
}
After successfully logging the results to the console, I now aim to display each object in myArray using this pagination system. How can I achieve this effectively?
I have attempted to utilize the append and append child functions for displaying the objects on screen. Despite watching various videos and reading articles, I have yet to find a solution.
In addition to the next and previous buttons, I also wish to include numbered buttons on the screen. These buttons should display the page number and lead to the corresponding page when clicked.
This is the code snippet I have been working on:
let products = [
productName: "Brand Name",
category: "category",
price: "30",
image: "images/main_img.jpg",
},
]
function createProductCards(products) {
for (let item of products) {
//Create Card
const card = document.createElement("div");
card.classList.add("card", item.category);//Card has category and starts hidden
//Image container
const imgContainer = document.createElement("div");
imgContainer.classList.add("image-container");
//Image tag
const image = document.createElement("img");
image.setAttribute("src", item.image);
imgContainer.appendChild(image);
card.appendChild(imgContainer);
//Info container
const infoContainer = document.createElement("div");
infoContainer.classList.add("container");
//Product name
const name = document.createElement("h5");
name.classList.add("product-name");
name.innerText = item.productName.toUpperCase();
infoContainer.appendChild(name);
//Price
const price = document.createElement("h6");
price.innerText = "$" + item.price;
infoContainer.appendChild(price);
card.appendChild(infoContainer);
document.getElementById("products").appendChild(card);
}
}