Back

Creating a Dynamic and Responsive Pagination Component

A step-by-step guide to building a robust and flexible pagination system with customizable navigation elements and seamless transitions.

HTML

The HTML for our pagination component consists of a container with buttons for previous and next navigation, and a dynamically generated sequence of page numbers.

        <div class="pagination-container">
          <button class="pagination-button prev" onclick="navigate(-1)">&laquo; Prev</button>
          <div class="page-numbers" id="pageNumbers"></div>
          <button class="pagination-button next" onclick="navigate(1)">Next &raquo;</button>
        </div>

JavaScript

Our JavaScript functions ensure the navigation system is responsive to user interaction. We'll establish functions to render the page numbers, navigate between pages, and select specific pages. Initialize variables for tracking current and total pages. Create functions to render, navigate, and jump to specific pages, updating the UI dynamically.

        let currentPage = 1;
        const totalPages = 10;

        function renderPageNumbers() {
          const pageNumbers = document.getElementById('pageNumbers');
          pageNumbers.innerHTML = '';
          for (let i = 1; i <= totalPages; i++) {
            const pageNumber = document.createElement('span');
            pageNumber.className = 'page-number';
            pageNumber.innerText = i;
            if (i === currentPage) {
              pageNumber.classList.add('active');
            }
            pageNumber.onclick = () => goToPage(i);
            pageNumbers.appendChild(pageNumber);
          }
        }

        function navigate(direction) {
          currentPage = Math.max(1, Math.min(totalPages, currentPage + direction));
          renderPageNumbers();
        }

        function goToPage(page) {
          currentPage = page;
          renderPageNumbers();
        }

        window.onload = renderPageNumbers;

CSS

The CSS styles ensure a visually appealing pagination. Elements are aligned using Flexbox, with animations for interaction and hover states.

        .pagination-container {
          display: flex;
          align-items: center;
          justify-content: center;
          margin-top: 20px;
          font-family: Arial, sans-serif;
        }
        .pagination-button {
          background-color: #02a8f4;
          color: white;
          border: none;
          padding: 10px 20px;
          margin: 0 5px;
          border-radius: 5px;
          cursor: pointer;
          transition: background-color 0.3s ease;
        }
        .pagination-button:hover {
          background-color: #026c9f;
        }
        .page-numbers {
          display: flex;
          align-items: center;
        }
        .page-number {
          margin: 0 5px;
          padding: 10px;
          border-radius: 5px;
          cursor: pointer;
          transition: background-color 0.3s ease, transform 0.3s ease;
        }
        .page-number.active {
          background-color: #32ffcc;
          transform: scale(1.2);
        }
        .page-number:hover {
          background-color: #d2f2ff;
        }

Conclusion

This dynamic pagination component offers a modern solution for paginated data. By adjusting the total pages or CSS, it can fit various applications seamlessly. Its interactive nature is perfect for enhancing user engagement. Feel free to modify this base to suit specific needs, whether for a blog, data set, or product list. Future enhancements could include keyboard navigation, accessibility improvements, or style extensions using frameworks like Bootstrap or Tailwind CSS.

Whole code

<div class="pagination-container">
  <button class="pagination-button prev" onclick="navigate(-1)">&laquo; Prev</button>
  <div class="page-numbers" id="pageNumbers"></div>
  <button class="pagination-button next" onclick="navigate(1)">Next &raquo;</button>
</div>

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

function renderPageNumbers() {
  const pageNumbers = document.getElementById('pageNumbers');
  pageNumbers.innerHTML = '';
  for (let i = 1; i <= totalPages; i++) {
    const pageNumber = document.createElement('span');
    pageNumber.className = 'page-number';
    pageNumber.innerText = i;
    if (i === currentPage) {
      pageNumber.classList.add('active');
    }
    pageNumber.onclick = () => goToPage(i);
    pageNumbers.appendChild(pageNumber);
  }
}

function navigate(direction) {
  currentPage = Math.max(1, Math.min(totalPages, currentPage + direction));
  renderPageNumbers();
}

function goToPage(page) {
  currentPage = page;
  renderPageNumbers();
}

window.onload = renderPageNumbers;
</script>

<style>
.pagination-container {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
  font-family: Arial, sans-serif;
}
.pagination-button {
  background-color: #02a8f4;
  color: white;
  border: none;
  padding: 10px 20px;
  margin: 0 5px;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
.pagination-button:hover {
  background-color: #026c9f;
}
.page-numbers {
  display: flex;
  align-items: center;
}
.page-number {
  margin: 0 5px;
  padding: 10px;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.3s ease;
}
.page-number.active {
  background-color: #32ffcc;
  transform: scale(1.2);
}
.page-number:hover {
  background-color: #d2f2ff;
}
</style>

Thank you for reading this article.

Creating a Dynamic and Responsive Pagination Component

HTML

JavaScript

CSS

Conclusion

Whole code

Comments

More paginations

Similar

See also