Zero-dependency page controls that follow your page's theme on their own. Real buttons, real ARIA — every card below is live.
97 items, 10 per page. Click around — prev/next disable at the ends.
new Pagination('#basic', {
total: 97, // perPage: 10 → 10 pages
onChange: (page) => load(page)
})
Two pages pinned at each end, two on each side of the current page — the strip never changes width while paging.
new Pagination('#windows', {
pages: 42, page: 21,
siblings: 2, boundaries: 2
})
Just prev · 3 / 12 · next — for toolbars and tight corners.
new Pagination('#compact', {
pages: 12, page: 3, compact: true
})
An item-range readout on the side, and a clamped “Go to” field — type 999 and press Enter.
new Pagination('#full', {
total: 137, perPage: 20,
showTotal: true, // or (total, [from, to]) => string
showJump: true
})
The pager and this list share one array — onChange
re-renders the slice, update() re-clamps when the data set shrinks.
const pager = new Pagination('#listpager', {
total: ITEMS.length, perPage: 5, showTotal: true,
onChange: (page) => renderSlice(page)
})
renderSlice(1)
// later, when the data changes:
pager.update({ total: ITEMS.length })