Building a Dynamic and Responsive Pagination Component

Introduction

Creating a pagination system is essential for navigating large datasets or content spread across multiple pages. Instead of overwhelming users with an endless scroll, a pagination component breaks content into manageable chunks. In this tutorial, we'll learn to build a sleek, animated pagination component using HTML, CSS, and JavaScript. Our component will adapt effectively to various screen sizes and ensure a smooth navigational experience.

HTML Structure

The first step is building our HTML. We'll start by creating a container to house our pagination controls. Here's the basic layout:

<div class="pagination-container">
  <button class="pagination-btn prev" onclick="prevPage()" disabled>
    <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" fill="none" stroke="#02a8f4" stroke-width="2">
      <path stroke-linecap="round" stroke-linejoin="round" d="M15 18l-6-6 6-6"/>
    </svg>
  </button>
  <ul class="pagination-list">
    <li onclick="goToPage(1)" class="page active">1</li>
    <li onclick="goToPage(2)" class="page">2</li>
    <li onclick="goToPage(3)" class="page">3</li>
    <li onclick="goToPage(4)" class="page">4</li>
    <li onclick="goToPage(5)" class="page">5</li>
  </ul>
  <button class="pagination-btn next" onclick="nextPage()">
    <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" fill="none" stroke="#32ffcc" stroke-width="2">
      <path stroke-linecap="round" stroke-linejoin="round" d="M9 18l6-6-6-6"/>
    </svg>
  </button>
</div>

This structure includes a container holding previous and next buttons, with a list of pages in between them. SVG icons represent these buttons, offering a modern and intuitive look.

Styling with CSS

Styling our pagination involves making it both attractive and responsive. We start by defining the main container's layout, using flexbox to center items:

.pagination-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
}

Next, we style the pagination buttons. We aim for a seamless design by removing the button's default styles:

.pagination-btn {
  border: none;
  background: none;
  cursor: pointer;
  transition: transform 0.3s;
}
.pagination-btn:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
.pagination-btn:hover:not(:disabled) {
  transform: scale(1.2);
}

We use CSS transitions to animate both hover and disabling effects, enhancing user interaction. Our pagination list leverages flexbox for even spacing:

.pagination-list {
  display: flex;
  list-style-type: none;
  padding: 0;
  margin: 0 10px;
}

Each page item gains a circular shape, with smooth animations during interactions:

.page {
  padding: 10px 15px;
  margin: 0 5px;
  cursor: pointer;
  border-radius: 5px;
  transition: background-color 0.3s, transform 0.3s;
}
.page.active {
  background-color: #32ffcc;
  color: white;
}
.page:hover {
  background-color: #02a8f4;
  color: white;
  transform: scale(1.1);
}

Implementing Functionality with JavaScript

Our JavaScript code dynamically updates the pagination based on user interaction. We define a variable to track the current page:

let currentPage = 1;
const totalPages = 5;

Next, we create functions to navigate between pages:

function goToPage(pageNumber) {
  if (pageNumber >= 1 && pageNumber <= totalPages) {
    currentPage = pageNumber;
    updatePagination();
  }
}

Pagination update logic ensures only the active page is highlighted, and it adjusts button states:

function updatePagination() {
  const pages = document.querySelectorAll('.page');
  pages.forEach((page, index) => {
    if (index + 1 === currentPage) {
      page.classList.add('active');
    } else {
      page.classList.remove('active');
    }
  });
  document.querySelector('.prev').disabled = currentPage === 1;
  document.querySelector('.next').disabled = currentPage === totalPages;
}

Helper functions to handle next and previous actions integrate seamlessly into our setup:

function prevPage() {
  goToPage(currentPage - 1);
}

function nextPage() {
  goToPage(currentPage + 1);
}

Advanced Customizations

Our pagination system is adaptable to various styles and themes. By simply tweaking the CSS, you can alter colors, sizes, and animations to better align with your project's aesthetic. Consider adding media queries for finer control over responsiveness and exploring accessibility features such as ARIA roles to enhance usability for all users. Whether it's theming for dark mode or scaling components for touch interfaces, possibilities for enhancement abound, empowering you to create an even more robust navigation experience.

Whole code

<div class="pagination-container">
  <button class="pagination-btn prev" onclick="prevPage()" disabled>
    <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" fill="none" stroke="#02a8f4" stroke-width="2">
      <path stroke-linecap="round" stroke-linejoin="round" d="M15 18l-6-6 6-6"/>
    </svg>
  </button>
  <ul class="pagination-list">
    <li onclick="goToPage(1)" class="page active">1</li>
    <li onclick="goToPage(2)" class="page">2</li>
    <li onclick="goToPage(3)" class="page">3</li>
    <li onclick="goToPage(4)" class="page">4</li>
    <li onclick="goToPage(5)" class="page">5</li>
  </ul>
  <button class="pagination-btn next" onclick="nextPage()">
    <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" fill="none" stroke="#32ffcc" stroke-width="2">
      <path stroke-linecap="round" stroke-linejoin="round" d="M9 18l6-6-6-6"/>
    </svg>
  </button>
</div>


<script>
let currentPage = 1;
const totalPages = 5;

function goToPage(pageNumber) {
  if (pageNumber >= 1 && pageNumber <= totalPages) {
    currentPage = pageNumber;
    updatePagination();
  }
}

function prevPage() {
  goToPage(currentPage - 1);
}

function nextPage() {
  goToPage(currentPage + 1);
}

function updatePagination() {
  const pages = document.querySelectorAll('.page');
  pages.forEach((page, index) => {
    if (index + 1 === currentPage) {
      page.classList.add('active');
    } else {
      page.classList.remove('active');
    }
  });
  document.querySelector('.prev').disabled = currentPage === 1;
  document.querySelector('.next').disabled = currentPage === totalPages;
}

</script>

<style>
.pagination-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
}
.pagination-btn {
  border: none;
  background: none;
  cursor: pointer;
  transition: transform 0.3s;
}
.pagination-btn:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
.pagination-btn:hover:not(:disabled) {
  transform: scale(1.2);
}
.pagination-list {
  display: flex;
  list-style-type: none;
  padding: 0;
  margin: 0 10px;
}
.page {
  padding: 10px 15px;
  margin: 0 5px;
  cursor: pointer;
  border-radius: 5px;
  transition: background-color 0.3s, transform 0.3s;
}
.page.active {
  background-color: #32ffcc;
  color: white;
}
.page:hover {
  background-color: #02a8f4;
  color: white;
  transform: scale(1.1);
}

</style>