Create a Pagination Component using HTML CSS and JavaScript

Last Updated : 21 Nov, 2023

In this article, we are going to create a pagination component using HTML, CSS, and JavaScript. Websites may need multiple pages to display the items for easier navigation and better user experiences. If you are looking to display large amounts of data on your site, like a blog, charts, or graphs that show information about the same data set, you will surely need to split these data into various pages for improved readability.

Pagination comes to the rescue in such a problem. It is a connected sequence of web pages that have similar content. The content of a section is divided into multiple pages with the help of pagination.

Approach

We initialize the constants for “itemsPerPage” and the “totalItems”. We set up variables to keep track of the current page.
We create a function to generate the content based on the current page. We also update the HTML content in it.
We create a function to generate pagination links and arrow buttons.
We attach click-based event listeners to pagination links and arrow buttons. When the pagination link is created, update the current page and update the pagination
Now we call the content and pagination function.

Example: This example illustrates the creation of the Pagination Component using HTML CSS & JavaScript.

HTML

<!-- index.html -->
<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" 
          content="width=device-width,  
                   initial-scale=1.0"> 
    <link rel="stylesheet" 
          href="style.css"> 
    <title>Pagination Example</title> 
</head> 
  
<body> 
    <div class="pagination-container"> 
        <div id="pagination" 
             class="pagination"> 
          </div> 
        <div id="content" 
             class="content"> 
          </div> 
    </div> 
    <script src="script.js"></script> 
</body> 
  
</html>

CSS

/* styles.css */
body { 
    font-family: Arial, sans-serif; 
    margin: 0; 
    padding: 0; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    height: 100vh; 
    background-color: #3498db; 
} 
  
.pagination-container { 
    text-align: center; 
} 
  
.pagination { 
    display: inline-block; 
    padding: 16px; 
} 
  
.pagination a { 
    color: #fff; 
    background-color: #2ecc71; 
    border: 1px solid #2ecc71; 
    border-radius: 8px; 
    padding: 10px 20px; 
    margin: 5px; 
    text-decoration: none; 
    font-size: 16px; 
    transition: background-color 0.3s; 
} 
  
.pagination a.active { 
    background-color: #27ae60; 
    border: 1px solid #27ae60; 
} 
  
.pagination a:hover:not(.active) { 
    background-color: #27ae60; 
    border: 1px solid #27ae60; 
    color: #fff; 
} 
  
.pagination .arrow { 
    font-size: 20px; 
    font-weight: bold; 
    margin: 0 10px; 
    cursor: pointer; 
    color: #fff; 
} 
  
.content { 
    padding: 20px; 
    background-color: #fff; 
    border-radius: 8px; 
    margin-top: 20px; 
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); 
}

Javascript

// script.js 
document.addEventListener("DOMContentLoaded", function () { 
    const contentDiv =  
        document.getElementById("content"); 
    const paginationDiv =  
        document.getElementById("pagination"); 
  
    const itemsPerPage = 3; 
    const totalItems = 10; 
    let currentPage = 1; 
  
    function generateContent(page) { 
        contentDiv.innerHTML = ""; 
        for (let i = (page - 1) * itemsPerPage + 1; 
            i <= page * itemsPerPage; i++) { 
            contentDiv.innerHTML += `<p>Item ${i}:  
            This is some content for item ${i}.</p>`; 
        } 
    } 
  
    function generatePagination() { 
        const totalPages = Math.ceil(totalItems / itemsPerPage); 
        paginationDiv.innerHTML = ""; 
  
        const prevArrow = document.createElement("span"); 
        prevArrow.className = "arrow"; 
        prevArrow.textContent = "←"; 
        prevArrow.addEventListener("click", function () { 
            if (currentPage > 1) { 
                currentPage--; 
                generateContent(currentPage); 
                generatePagination(); 
            } 
        }); 
        paginationDiv.appendChild(prevArrow); 
  
        for (let i = 1; i <= totalPages; i++) { 
            const link = document.createElement("a"); 
            link.href = "#"; 
            link.textContent = i; 
  
            if (i === currentPage) { 
                link.classList.add("active"); 
            } 
  
            link.addEventListener("click", function () { 
                currentPage = i; 
                generateContent(currentPage); 
                generatePagination(); 
            }); 
  
            paginationDiv.appendChild(link); 
        } 
  
        const nextArrow = document.createElement("span"); 
        nextArrow.className = "arrow"; 
        nextArrow.textContent = "→"; 
        nextArrow.addEventListener("click", function () { 
            if (currentPage < totalPages) { 
                currentPage++; 
                generateContent(currentPage); 
                generatePagination(); 
            } 
        }); 
        paginationDiv.appendChild(nextArrow); 
    } 
  
    generateContent(currentPage); 
    generatePagination(); 
});