Pagination without current page

Problem Context

• The interface splits a table, result list, collection, audit log, inbox, resource list, catalog, or search result into multiple pages.
• Users rely on page position to resume work, compare ranges, share URLs, move with previous/next, or confirm that filters and sort persisted.
• The UI may have identical page chips, previous/next-only controls, ellipses, cursor pagination, async loading, page-size changes, filters, sort, or browser back/forward.
• Current-page state may be missing visually, missing from accessibility semantics, out of sync with the result range, or lost after loading.

Selection Rules

• Flag this anti-pattern when a pagination set has no visible current page, no aria-current or equivalent current-state text, or more than one item that appears current.
• Flag it when previous/next controls exist but the page number, result range, total pages, URL, and disabled edge states do not identify where the user is.
• Use standard pagination when users are traversing ordered slices of one collection and need current page, previous, next, result range, total count, and edge states.
• Use breadcrumbs when the issue is hierarchy orientation, not collection page position.
• Use step navigation when the numbers represent task progress through a known workflow, not result pages.
• Use table, list view, or resource-list guidance for row anatomy and collection controls, but keep pagination current-page state near the collection it controls.
• Use feed or load-more behavior only when exact page position is not part of the task; if position matters, pagination needs a current state.
• When filters, sort, search, or page-size changes alter the result set, either preserve a still-valid current page or visibly move to a valid page and announce why.
• For cursor pagination, expose a meaningful current range or position such as Showing 41-60 and disable or hide invalid previous/next actions.

Required States

• Default middle-page state with exactly one visible current page and matching result range.
• First page state with current page 1 and previous unavailable.
• Last page state with current last page and next unavailable.
• Loading state that keeps the old current page understandable until the new page is committed.
• Filter or sort change state that returns to a valid page and announces the new current page.
• Out-of-range recovery state when a bookmarked or stale page no longer exists.
• Previous/next-only or cursor pagination state with current result range instead of ambiguous numbered links.
• Bad state showing identical page numbers, multiple current pages, stale URL/range mismatch, and missing aria-current.

Interaction Contract

• Each pagination region has one owner collection and one current page or current range.
• Exactly one page item is marked current in a numbered pagination set.
• The current page is conveyed by text, visual state, and programmatic state rather than color alone.
• Previous and next move relative to the current page and are unavailable at collection edges.
• Result range, total count, current page, URL or route state, and visible records stay synchronized.
• Page changes preserve query, filters, sort, page size, selection policy, and focus context unless the UI explicitly states a reset.
• Loading, errors, and out-of-range recovery do not leave users guessing whether the current page changed.
• Keyboard and screen reader users can identify the current page before activating another page control.

Implementation Checklist

• Render pagination inside a labelled nav or equivalent region near the controlled results.
• Apply aria-current="page" to exactly one current page link or button when numbered pages are rendered.
• Include visible current-page wording or an accessible label such as Page 3, current page.
• Show the result range and total count near the pagination or collection summary.
• Disable, hide, or relabel Previous and Next at the first and last page without making unavailable actions look active.
• Keep page state, URL parameters, server cursor, result range, and visible records from drifting apart.
• Handle filter, sort, search, and page-size changes by moving to a valid current page and announcing the change.
• Test async loading, browser back/forward, reload, narrow layouts, ellipses, page-size selectors, and cursor-only pagination.
• Ensure current state is not indicated only by color, hover, focus ring, or disabled styling.

Common Generated-UI Mistakes

• Showing page numbers as identical chips with no selected state.
• Relying on the browser URL as the only current-page indicator.
• Marking both a page number and Next as current.
• Leaving aria-current on a stale page after async navigation.
• Using disabled styling on the current page without accessible current-page text.
• Showing result range 41-50 while page 2 is highlighted.
• Hiding page numbers on mobile without replacing them with Page x of y or a current range.
• Treating cursor pagination as exempt from current-position feedback.

Critique Questions

• Which page or result range is current right now?
• Can users identify the current page visually, by keyboard, and through assistive technology?
• Do result range, URL, visible records, and page controls agree?
• What happens to current-page state after loading, filtering, sorting, page-size changes, browser back, and reload?
• Are previous and next clearly relative to the current page and unavailable at the edges?
• Is this actually task progress, hierarchy navigation, or a feed rather than pagination?