Pagination Ellipsis Implementation in JavaScript

Pagination Ellipsis Implementation in JavaScript

Showing ellipsis (...) for many pages keeps the pagination compact. Here is the algorithm.

The Problem

If there are 100 pages, showing all 100 buttons is impractical. Show: first page, last page, current page and its neighbors, and ellipsis for the gaps.

The Algorithm

function getPageNumbers(current, total) {
  // If 7 or fewer pages, show all
  if (total <= 7) {
    return Array.from({ length: total }, (_, i) => i + 1);
  }

  // If current is near the start
  if (current <= 4) {
    return [1, 2, 3, 4, 5, "...", total];
  }

  // If current is near the end
  if (current >= total - 3) {
    return [1, "...", total - 4, total - 3, total - 2, total - 1, total];
  }

  // If current is in the middle
  return [1, "...", current - 1, current, current + 1, "...", total];
}

Examples

• total = 5, current = 3: [1, 2, 3, 4, 5] (no ellipsis, 7 or fewer)
• total = 20, current = 3: [1, 2, 3, 4, 5, "...", 20]
• total = 20, current = 10: [1, "...", 9, 10, 11, "...", 20]
• total = 20, current = 18: [1, "...", 16, 17, 18, 19, 20]

Rendering

pages.map(p => {
  if (p === "...") return "<span class='ellipsis'>...</span>";
  return `<button class="${p === current ? "active" : ""}">${p}</button>`;
}).join("");

CSS

.ellipsis { padding: 8px 4px; color: #888; }

The Takeaway

Ellipsis algorithm: if total <= 7, show all pages. If current is near the start, show [1-5, ..., total]. If near the end, show [1, ..., total-4 to total]. If in the middle, show [1, ..., current-1, current, current+1, ..., total]. This keeps pagination compact for any number of pages.