Pagination is a fundamental feature in web development, often used to divide content into manageable chunks. In this blog, we’ll explore how to create a dynamic pagination system using HTML, CSS, and JavaScript. This system enables users to navigate through multiple pages seamlessly.
Live Demo Features
- Dynamically updates page content based on the selected page number.
- Previous and Next buttons adaptively enable or disable based on the current page.
- Clear visual feedback for the active page.
Video Tutorials:
Watch the step-by-step video tutorial to learn how to create this dynamic pagination system and implement it in your projects. 🎥
HTML Structure
The HTML is simple, containing the page content, a pagination bar, and navigation buttons.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Dynamic Pagination</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="content-wrapper">
<div id="page-content" class="page-content">
Page 1: Welcome to the first page!
</div>
<div class="pagination">
<button class="prev-btn" disabled>« Prev</button>
<button class="page-btn active">1</button>
<button class="page-btn">2</button>
<button class="page-btn">3</button>
<button class="page-btn">4</button>
<button class="page-btn">5</button>
<button class="next-btn">Next »</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
Â
CSS Styling
The CSS ensures the pagination is visually appealing and responsive.
* {
font-family: "Poppins", sans-serif;
}
.content-wrapper {
max-width: 600px;
margin: 50px auto;
text-align: center;
}
.page-content {
font-size: 18px;
margin-bottom: 20px;
padding: 20px;
border: 1px solid #dddddd;
border-radius: 5px;
background-color: #f9f9f9;
}
.pagination {
display: flex;
justify-content: center;
align-items: center;
gap: 0.5rem;
}
.pagination button {
padding: 8px 14px;
font-size: 16px;
border: none;
background-color: #f4f4f4;
cursor: pointer;
transition: background-color 0.3s ease;
}
.pagination .active {
background-color: #007bff;
color: #ffffff;
font-weight: bold;
}
.pagination button:hover:not(.active) {
background-color: #e0e0e0;
}
.pagination button:disabled {
background-color: #ccc;
color: #666666;
cursor: not-allowed;
}
JavaScript Logic
The JavaScript drives the dynamic content updates and button states.
Key Features:
- Dynamic Content: Displays different content for each page.
- Active State: Highlights the currently active page button.
- Button Disabling: Disables “Prev” on the first page and “Next” on the last page.
const pageContent = document.getElementById("page-content");
const pageButtons = document.querySelectorAll(".page-btn");
const prevButton = document.querySelector(".prev-btn");
const nextButton = document.querySelector(".next-btn");
const pages = [
"Page 1: Welcome to the first page!",
"Page 2: Here is some more information.",
"Page 3: You're halfway through!",
"Page 4: Almost at the end!",
"Page 5: Thanks for visiting the last page",
];
let currentPage = 1;
function updatePagination() {
pageContent.textContent = pages[currentPage - 1];
pageButtons.forEach((btn, index) => {
btn.classList.toggle("active", index + 1 === currentPage);
});
prevButton.disabled = currentPage === 1;
nextButton.disabled = currentPage === pages.length;
}
pageButtons.forEach((btn, index) => {
btn.addEventListener("click", () => {
currentPage = index + 1;
updatePagination();
});
});
prevButton.addEventListener("click", () => {
if (currentPage > 1) {
currentPage--;
updatePagination();
}
});
nextButton.addEventListener("click", () => {
if (currentPage < pages.length) {
currentPage++;
updatePagination();
}
});
updatePagination();
-
Initialization:
- The
pagesarray stores the content for each page. - The
currentPagevariable keeps track of the active page.
- The
-
Dynamic Updates:
- The
updatePaginationfunction updates the displayed content and adjusts the active state of buttons.
- The
-
Event Listeners:
- Clicking on a page number directly updates the
currentPageand refreshes the content. - The “Prev” and “Next” buttons navigate between pages and automatically enable or disable based on the current page.
- Clicking on a page number directly updates the
