Pagination
分页
Aliases:分页器翻页页码上一页下一页页码条pager
What is it
A page-numbered control that slices long result sets into discrete pages: users explicitly click a page number or prev / next to fetch that slice, so the current position is always known, shareable and reversible. The controlled counterpart to infinite scrolling's endless drift — the default for search results and admin tables.
Interactive playground
Try it. Make an informed choice.Try page numbers and previous/next controls, including boundaries.
Loading lab…
What to look for
- 01Disable movement before the first or beyond the last page.
- 02Changing pages must update content as well as button styling.
✓ When to use
- Ordered results where users track and revisit positions
- Shareable page URLs — search results, admin tables
- Jumping to an exact page or the last page matters
✕ When not to use
- Casual feeds meant for endless browsing
- Tiny result sets that fit on one page
- Content that cannot be evenly or stably sliced
Variants
Numbered
页码型
Full numbers + ellipsis, most control
Simple
简洁型
Prev / next with a counter only
Jump
跳页型
Numbers + jump input for huge sets
Implementation
flexgapmin-widtharia-disabledWindowing algorithm: always show the first and last pages plus current ± 1, folding the middle into ellipses. Mark the current page with aria-current="page" and an accent block; disable prev / next at the edges (disabled + aria-disabled). Sync the URL with ?page=n so positions are shareable and reversible.
Platform API
<nav aria-label="Pagination">role="navigation"Compare
Full comparison →| Pagination分页 | Infinite Scroll无限滚动 | Pull to Refresh下拉刷新 | |
|---|---|---|---|
| Trigger | Explicit clicks on page numbers | Automatic — fires at scroll bottom | Deliberate pull gesture by the user |
| Data control | Strong — the user holds the position | System-paced — user passively receives more | User-initiated request for fresh data |
| Suitable content | Ordered, addressable result sets | Browsing-oriented feeds and timelines | Feeds and messages needing a manual refresh |
Related concepts
Replaces pagination with automatic loading: as the user scrolls to the bottom, the next page of content appends seamlessly, bridged by a loading indicator or sentinel element. It solves the broken browsing rhythm of hunting for a "next page" button — attention stays on the feed while long lists arrive in imperceptible chunks.
PatternsAlternativePress at the top of a list and drag downward: an indicator tracks the pull distance, and releasing past a threshold refetches the latest data. It solves the "content may be stale" problem — the user requests a refresh deliberately and predictably, staying in control of both timing and outcome instead of waiting for background polling.
PatternsAlternativeA two-dimensional grid aligning data in rows and columns — one record per row, one field per column — built for column-by-column comparison, sorting and high-volume browsing. Rows highlight on hover and support selection; column headers usually carry sort controls.
ComponentsSimilarA row of switchable labels that divide one region into mutually exclusive views: the tab headers stay visible and clickable, and only the active tab's panel shows while the rest stay hidden. Packs several tightly related contents into one area to switch in place instead of full-page navigation. Arrow-key navigation between tabs makes it a classic accessibility showcase.
ComponentsSimilarNarrows a large list to whatever matches the current input: every keystroke filters the list in place, with hit counts and an empty-state hint. Finding becomes pruning — no submit, no page jump, feedback stays right in front of the user.
PatternsUsed with