Pagination — Numbered Page Navigation Snippet

Pagination is one of the most-searched UI components because almost every list, search result, blog, or data table that spans many pages needs a clean way to move between them (see the pagination table for the table-integrated version). This snippet is a complete, accessible pagination control: numbered page buttons, previous/next arrows, an active-page highlight, and the genuinely tricky part — smart ellipsis truncation that keeps the control compact no matter how many pages there are. It is built with vanilla JavaScript and renders the page list dynamically from the current page.

The smart ellipsis algorithm

The hard part of pagination is not styling — it is deciding which page numbers to show when there are dozens or hundreds. Showing all of them is unusable; showing too few hides useful context. This snippet uses the standard "first, last, and a window around the current page" rule. The pageList(c, n) function builds a Set of the pages that always matter — 1, n (last), the current page c, and its immediate neighbours c-1 and c+1 — filters out anything off-range, and sorts them. Then it walks the sorted list and, wherever there is a gap larger than one between consecutive pages, inserts an '…' ellipsis. So on page 6 of 12 you get 1 … 5 6 7 … 12, and on page 1 you get 1 2 … 12. The control stays the same compact width whether you have 12 pages or 12,000.

Rendering from state

The component keeps a single piece of state — current — and a render() function rebuilds the page buttons every time it changes. This state-driven approach is exactly how you would build pagination in React or Vue, just expressed in vanilla DOM: compute the page list, create a button for each number (or a span for each ellipsis), mark the active one, and wire a click handler that calls go(p). Because rendering is a pure function of current and TOTAL, the active highlight, disabled arrows, and ellipses are always correct without any manual DOM patching.

Previous / next arrow behaviour

The prev and next arrows are real <button> elements with SVG chevrons. They call go(current - 1) and go(current + 1), and go() clamps the value between 1 and TOTAL so you can never navigate past the ends. Critically, the arrows become disabled at the boundaries — prevBtn.disabled = current === 1 and nextBtn.disabled = current === TOTAL — which both prevents invalid navigation and gives a clear visual cue (the dimmed, not-allowed cursor) that you have reached the first or last page.

The active page and current state

The current page button gets an .active class (filled accent color, non-interactive cursor) so users always know where they are. For accessibility it also receives aria-current="page", the correct ARIA attribute that tells screen readers which item in the set is the current one. The whole control is wrapped in a <nav aria-label="Pagination"> landmark, and each numbered button has an aria-label like "Page 5" so the buttons are announced meaningfully rather than as a bare number. A status line ("Page 6 of 12") gives sighted users an at-a-glance summary and can double as a live region for screen readers.

Why generate the buttons in JavaScript

Hard-coding page buttons in HTML only works for a fixed, small number of pages. Real pagination is driven by data — total items, page size, current page — so the buttons must be generated. This snippet centralizes that in render(), which means wiring it to a real backend is a two-line change: set TOTAL from your API's total-pages value, and in go(p) fetch that page's data (or update the URL query string) before re-rendering. The truncation, active state, and arrow logic all keep working unchanged.

Customizing the control

Re-theme by changing the button border, hover background, and the .active accent color. Widen the window around the current page by adding c-2 and c+2 to the Set in pageList if you want two neighbours shown on each side. To make the buttons circular, set border-radius: 50% and a fixed width/height. You can add "First" and "Last" jump buttons beside the arrows, or a "Go to page" input, using the same go() function. For URL-based pagination, read the page from location.search on load and push a new query string in go() so pages are bookmarkable and the browser back button works.

Accessibility checklist

Keep the <nav> landmark with an aria-label so assistive tech can find and name the pagination region. Keep aria-current="page" on the active button. Ensure the disabled arrows use the disabled attribute (not just a class) so they are removed from the tab order and announced as unavailable. Maintain strong contrast between the active button and the rest, and between text and background, so low-vision users can read the numbers. Because every control is a native <button>, the whole component is keyboard-operable — Tab to move between pages, Enter/Space to activate — with no extra code.