From 1a03730cdd81c38668ac4c50be4d6b2e6dafc410 Mon Sep 17 00:00:00 2001 From: asim-shrestha Date: Sat, 14 Sep 2024 19:09:42 -0700 Subject: [PATCH] =?UTF-8?q?=F0=9F=95=B8=EF=B8=8F=20Pagination=20buttons?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- static/g9Kp3mFq7xZyLtRbNvCj4/index.html | 25 ++++++++++++++++++++----- 1 file changed, 20 insertions(+), 5 deletions(-) diff --git a/static/g9Kp3mFq7xZyLtRbNvCj4/index.html b/static/g9Kp3mFq7xZyLtRbNvCj4/index.html index 940aaf8..8d76182 100644 --- a/static/g9Kp3mFq7xZyLtRbNvCj4/index.html +++ b/static/g9Kp3mFq7xZyLtRbNvCj4/index.html @@ -49,6 +49,7 @@ .pagination { display: flex; justify-content: center; + align-items: center; margin-top: 30px; list-style-type: none; padding: 0; @@ -73,6 +74,11 @@ background-color: #a0c9a0; cursor: not-allowed; } + .page-info { + font-size: 1em; + color: #2c7c2c; + margin: 0 20px; + } @@ -80,10 +86,13 @@

Fresh Grocery Mart

@@ -108,6 +117,7 @@

Fresh Grocery Mart

let currentPage = 0; const productsPerPage = 5; + const totalPages = Math.ceil(products.length / productsPerPage); function displayProducts() { const productList = document.getElementById('productList'); @@ -131,6 +141,7 @@

${product.name}

}); updatePaginationButtons(); + updatePageInfo(); } function updatePaginationButtons() { @@ -140,9 +151,13 @@

${product.name}

paginationItems[0].style.display = currentPage > 0 ? 'block' : 'none'; buttons[0].disabled = currentPage === 0; - const lastPage = Math.ceil(products.length / productsPerPage) - 1; - paginationItems[1].style.display = currentPage < lastPage ? 'block' : 'none'; - buttons[1].disabled = currentPage >= lastPage; + paginationItems[2].style.display = currentPage < totalPages - 1 ? 'block' : 'none'; + buttons[1].disabled = currentPage >= totalPages - 1; + } + + function updatePageInfo() { + document.getElementById('currentPageNum').textContent = currentPage + 1; + document.getElementById('totalPages').textContent = totalPages; } function changePage(direction) {