Building a Pagination Component: A Complete Guide

Building a Pagination Component: A Complete Guide

Pagination is essential for large datasets. Here is the complete guide to building a pagination component.

Requirements

• Page numbers with current page highlighted.
• Previous and Next buttons.
• Ellipsis for many pages (1 ... 4 5 6 ... 20).
• Page size selector (optional).
• Works with client-side and server-side data.

Client-Side Pagination

const data = Array.from({ length: 100 }, (_, i) => `Item ${i + 1}`);
let currentPage = 1;
let pageSize = 10;

function getTotalPages() {
  return Math.ceil(data.length / pageSize);
}

function getCurrentPageData() {
  const start = (currentPage - 1) * pageSize;
  return data.slice(start, start + pageSize);
}

function renderPagination() {
  const totalPages = getTotalPages();
  const pages = getPageNumbers(currentPage, totalPages);
  paginationDiv.innerHTML = `
    <button onclick="goToPage(${currentPage - 1})" ${currentPage === 1 ? "disabled" : ""}>Prev</button>
    ${pages.map(p => p === "..." ? "<span>...</span>" : `<button onclick="goToPage(${p})" class="${p === currentPage ? "active" : ""}">${p}</button>`).join("")}
    <button onclick="goToPage(${currentPage + 1})" ${currentPage === totalPages ? "disabled" : ""}>Next</button>
  `;
}

function goToPage(page) {
  currentPage = Math.max(1, Math.min(page, getTotalPages()));
  renderData();
  renderPagination();
}

function getPageNumbers(current, total) {
  if (total <= 7) return Array.from({ length: total }, (_, i) => i + 1);
  if (current <= 4) return [1, 2, 3, 4, 5, "...", total];
  if (current >= total - 3) return [1, "...", total - 4, total - 3, total - 2, total - 1, total];
  return [1, "...", current - 1, current, current + 1, "...", total];
}

CSS

.pagination { display: flex; gap: 4px; align-items: center; }
.pagination button { padding: 8px 12px; border: 1px solid #ccc; cursor: pointer; border-radius: 4px; }
.pagination button.active { background: #007bff; color: white; border-color: #007bff; }
.pagination button:disabled { opacity: 0.5; cursor: not-allowed; }
.pagination span { padding: 8px 4px; }

Server-Side Pagination

async function fetchPage(page, size) {
  const res = await fetch(`/api/data?page=${page}&size=${size}`);
  const { data, totalPages } = await res.json();
  return { data, totalPages };
}

The Takeaway

Pagination: calculate total pages (Math.ceil(total / pageSize)), slice data for current page, render page numbers with ellipsis for many pages, highlight current page, prev/next buttons with disabled states. Client-side uses array.slice; server-side uses API with page and size params.