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 effortleÂssly navigate through numerous content pages, facilitating their search for specific information.
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 iteÂms and pagination controls. This ensures a well-organizeÂd layout that enhances user eÂxperience.
- CSS Styling: Apply basic CSS styles to improve the appearance of the items and pagination buttons.
- JavaScript Functionality: The task at hand involveÂs writing JavaScript functions to effectively manage pagination logic. This includes the seamleÂss display of the appropriate items on eÂach page and the seamleÂss 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 numbeÂr of pages based on the quantity of cards peÂr page. Two essential functions are then defined: displayPageÂ(page) controls which cards are displayed for the current page, while updateÂPagination() adjusts the pagination buttons and page numbers baseÂd on the current page and total pageÂs. Furthermore, eveÂnt listeners have beÂen included for the "PreÂvious," "Next," and page number buttons to facilitate navigation.
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>Pagination Example</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="data-container">
<h1> Pagination in HTML CSS & JavaScript</h1>
<div class="card-container">
<div class="card">
<img src=
"https://media.geeksforgeeks.org/img-practice/banner/mern-full-stack-development-classroom-thumbnail.png?v=19630"
alt="Image 1">
<h3>mern full stack development classroom</h3>
<p>This is the content of Card 1.</p>
</div>
<div class="card">
<img src=
"https://media.geeksforgeeks.org/img-practice/banner/devops-live-thumbnail.png?v=19630"
alt="Image 2">
<h3>Dev Ops Live</h3>
<p>This is the content of Card 2.</p>
</div>
<div class="card">
<img src=
"https://media.geeksforgeeks.org/img-practice/banner/gate-data-science-and-artificial-intelligence-da-2024-thumbnail.png?v=19630"
alt="Image 3">
<h3>Gate Date science and artificial intelligence</h3>
<p>This is the content of Card 3.</p>
</div>
<div class="card">
<img src=
"https://media.geeksforgeeks.org/img-practice/banner/gate-crash-course-2024-thumbnail.png?v=19630"
alt="Image 4">
<h3>gate crash course 2024 </h3>
<p>This is the content of Card 4.</p>
</div>
<div class="card">
<img src=
"https://media.geeksforgeeks.org/img-practice/banner/complete-test-series-product-companies-thumbnail.png?v=19631"
alt="Image 5">
<h3>complete test series product companies</h3>
<p>This is the content of Card 5.</p>
</div>
<div class="card">
<img src=
"https://media.geeksforgeeks.org/img-practice/banner/dsa-to-development-coding-guide-thumbnail.png?v=19630"
alt="Image 6">
<h3>dsa to development coding guide</h3>
<p>This is the content of Card 6.</p>
</div>
<div class="card">
<img src=
"https://media.geeksforgeeks.org/img-practice/banner/geeks-classes-live-thumbnail.png?v=19630"
alt="Image 7">
<h3>geeks classes live</h3>
<p>This is the content of Card 7.</p>
</div>
<div class="card">
<img src=
"https://media.geeksforgeeks.org/img-practice/banner/dsa-interview-preparation-classroom-thumbnail.png?v=19631"
alt="Image 8">
<h3>dsa interview preparation classroom</h3>
<p>This is the content of Card 8.</p>
</div>
<div class="card">
<img src=
"https://media.geeksforgeeks.org/img-practice/banner/complete-interview-preparation-thumbnail.png?v=19631"
alt="Image 9">
<h3>complete interview preparation</h3>
<p>This is the content of Card 9.</p>
</div>
<div class="card">
<img src=
"https://media.geeksforgeeks.org/img-practice/banner/Data-Structures-With-Python-thumbnail.png?v=19631"
alt="Image 10">
<h3>Data Structures With Python</h3>
<p>This is the content of Card 10.</p>
</div>
<!-- Add more cards as needed -->
</div>
</div>
<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>
</body>
</html>
/* 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;
}
//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 ${currentPage} of ${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:
