Component Deep Dive #7: Pagination — Loading 10,000 Records One Page at a Time

#javascript #css #frontend #webdev

This component is from Web Component Dictionary v2.0 — 83 components, bilingual, live preview, zero dependencies.

You search "phone case" and get 12,847 results. Rendering them all freezes the browser. Pagination solves this — but it's full of pitfalls.

The Ellipsis Algorithm

The hardest part isn't styling — it's knowing when to show "...". When total pages exceed visible pages, middle pages fold into ellipsis:

function getPageNumbers(current, total, visible = 5) {
  let pages = [];
  let start = Math.max(1, current - Math.floor(visible / 2));
  let end = Math.min(total, start + visible - 1);
  start = Math.max(1, end - visible + 1);
  if (start > 1) { pages.push(1); if (start > 2) pages.push('...'); }
  for (let i = start; i <= end; i++) pages.push(i);
  if (end < total) { if (end < total - 1) pages.push('...'); pages.push(total); }
  return pages;
}

Common Pitfalls

Page overflow: User types ?page=999 — always validate bounds
Race conditions: Fast clicking sends multiple requests — use AbortController
SEO: Search engines may not execute JS — provide rel="next"/rel="prev"

URL Sync

Users refreshing or sharing should return to the same page:

const params = new URLSearchParams(window.location.search);
let currentPage = parseInt(params.get('page')) || 1;

Complete Working Code

The full implementation includes prev/next buttons with disabled states, active page highlighting, and ellipsis folding — all in a single HTML file with no dependencies.