Create a Pagination using HTML CSS and JavaScript (original) (raw)

Last Updated : 30 Jul, 2024

In this article, we will create a working pagination using HTML, CSS, and JavaScript. Pagination, a widely employed user interface pattern, serves the purpose of dividing extensive data or content into more manageable portions. It allows users the ability to effortlessly navigate through numerous content pages, facilitating their search for specific information.

Create-a-Pagination-in-HTML-CSS-&-JavaScript

Approach to Create a Pagination with HTML CSS & JavaScript

To create a pagination system, we'll follow these steps:

The HTML structure should be established for the page, incorporating a container for the items and pagination controls. This ensures a well-organized layout that enhances user experience.
**CSS Styling: Apply basic CSS styles to improve the appearance of the items and pagination buttons.
**JavaScript Functionality: The task at hand involves writing JavaScript functions to effectively manage pagination logic. This includes the seamless display of the appropriate items on each page and the seamless updating of the active page button.
**Event Listeners: Attach event listeners to the pagination buttons to allow users to navigate between pages.

**Example: In this JavaScript code, It begins by calculating the total number of pages based on the quantity of cards per page. Two essential functions are then defined: displayPage(page) controls which cards are displayed for the current page, while updatePagination() adjusts the pagination buttons and page numbers based on the current page and total pages. Furthermore, event listeners have been included for the "Previous," "Next," and page number buttons to facilitate navigation.

HTML `

Pagination Example

Pagination in HTML CSS & JavaScript

mern full stack development classroom

This is the content of Card 1.

Dev Ops Live

This is the content of Card 2.

Gate Date science and artificial intelligence

This is the content of Card 3.

gate crash course 2024

This is the content of Card 4.

complete test series product companies

This is the content of Card 5.

dsa to development coding guide

This is the content of Card 6.

geeks classes live

This is the content of Card 7.

dsa interview preparation classroom

This is the content of Card 8.

complete interview preparation

This is the content of Card 9.

Data Structures With Python

This is the content of Card 10.

<div class="pagination" id="pagination"> 
    <a href="#" id="prev">Previous</a> 
    <a href="#" class="page-link" data-page="1">1</a> 
    <a href="#" class="page-link" data-page="2">2</a> 
    <a href="#" class="page-link" data-page="3">3</a> 
    <a href="#" id="next">Next</a> 
    <p id="page-numbers"> </p> 
</div> 

<script src="script.js"> </script>

CSS

/* style.css */ body { font-family: Arial, sans-serif; margin: 3rem; }

.container { max-width: 1200px; margin: 0 auto; padding: 20px; }

.pagination { text-align: center; margin-top: 2rem; }

.pagination a { color: #007BFF; padding: 8px 16px; text-decoration: none; border: 1px solid #007BFF; margin: 0 5px; border-radius: 4px; }

.pagination a:hover { background-color: #007BFF; color: white; }

.pagination .active { background-color: #007BFF; color: white; }

.card-container { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }

.card { border: 1px solid #ddd; padding: 20px; border-radius: 10px; box-shadow: 0 2px 20px 0px rgba(0, 0, 0, 0.1); background-color: #fff; text-align: center; }

.card img { max-width: 100%; height: auto; margin-bottom: 10px; border-radius: 10px; }

h3 { margin-top: 10px; font-size: 18px; text-transform: capitalize; }

h1 { text-align: center; margin: 2rem; }

p { font-size: 14px; }

#page-numbers { margin-top: 20px; font-size: 16px; }

` JavaScript ``

//script.js const cardsPerPage = 4; // Number of cards to show per page const dataContainer = document.getElementById('data-container'); const pagination = document.getElementById('pagination'); const prevButton = document.getElementById('prev'); const nextButton = document.getElementById('next'); const pageNumbers = document.getElementById('page-numbers'); const pageLinks = document.querySelectorAll('.page-link');

const cards = Array.from(dataContainer.getElementsByClassName('card'));

// Calculate the total number of pages const totalPages = Math.ceil(cards.length / cardsPerPage); let currentPage = 1;

// Function to display cards for a specific page function displayPage(page) { const startIndex = (page - 1) * cardsPerPage; const endIndex = startIndex + cardsPerPage; cards.forEach((card, index) => { if (index >= startIndex && index < endIndex) { card.style.display = 'block'; } else { card.style.display = 'none'; } }); }

// Function to update pagination buttons and page numbers function updatePagination() { pageNumbers.textContent = Page <math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><mrow><mi>c</mi><mi>u</mi><mi>r</mi><mi>r</mi><mi>e</mi><mi>n</mi><mi>t</mi><mi>P</mi><mi>a</mi><mi>g</mi><mi>e</mi></mrow><mi>o</mi><mi>f</mi></mrow><annotation encoding="application/x-tex">{currentPage} of </annotation></semantics></math>currentPageof{totalPages}; prevButton.disabled = currentPage === 1; nextButton.disabled = currentPage === totalPages; pageLinks.forEach((link) => { const page = parseInt(link.getAttribute('data-page')); link.classList.toggle('active', page === currentPage); }); }

// Event listener for "Previous" button prevButton.addEventListener('click', () => { if (currentPage > 1) { currentPage--; displayPage(currentPage); updatePagination(); } });

// Event listener for "Next" button nextButton.addEventListener('click', () => { if (currentPage < totalPages) { currentPage++; displayPage(currentPage); updatePagination(); } });

// Event listener for page number buttons pageLinks.forEach((link) => { link.addEventListener('click', (e) => { e.preventDefault(); const page = parseInt(link.getAttribute('data-page')); if (page !== currentPage) { currentPage = page; displayPage(currentPage); updatePagination(); } }); });

// Initial page load displayPage(currentPage); updatePagination();

**Output:

p1-ezgifcom-optimize