Pagination
Page navigation controls: numbered, prev/next, jump-to-page, load-more, and infinite scroll — all with working Alpine state.
1. Numbered Pages
DaisyUI's join wraps a row of btn elements into a single connected control. Alpine tracks the active page and recomputes which numbers to show — including the sliding window with ellipses for large page counts.
Small set (≤7 pages) — every page shown
Showing page of
Large set (42 pages) — sliding window with ellipsis
Showing page of — try jumping to page 1, 20, or 42
2. Prev / Next Only
Used when total page count is unknown or unimportant to the user — common on blog archives and search results where browsing forward/back matters more than jumping.
With page indicator
Unknown total — server tells us when data ends
Reached the last page — "Next" disabled because the API returned no further results.
3. Jump-to-Page Input
A number input paired with the page controls — useful for large data sets (admin tables, search archives) where clicking through dozens of pages is impractical.
Currently on page . Out-of-range values are clamped on submit (try typing 999 or 0).
4. Load More Button
Appends the next batch to the existing list rather than replacing it — common on product grids and feeds. Includes a real loading state (simulated network delay) and an end-of-results state once the catalog is exhausted.
You've reached the end — all items loaded.
5. Infinite Scroll Trigger
Same batching logic as Load More, but the next batch fires automatically when a sentinel element scrolls into view — using the Alpine Intersect plugin (already loaded globally), no extra library needed.
Scroll the box above — the sentinel at the bottom triggers loading, same as scrolling a real page.
6. Items-Per-Page Selector
A native DaisyUI select paired with numbered pagination. Changing the page size recalculates total pages and clamps the current page so it never points past the new last page.
Showing – of results
7. Sizes
Controlled entirely by DaisyUI's button-size modifiers on each join-item btn — no custom CSS required.
xs — dense tables / compact toolbars
sm — standard (most common)
md — default size, larger touch targets
lg — hero / featured listing pages
8. States
Disabled boundaries, loading, error, and empty states every pagination implementation needs to handle.
First page — "Prev" and "1" disabled/active correctly
Loading — fetching next page, controls disabled
Error — failed to load page, retry affordance
Empty — zero results, pagination hidden entirely
No results found. Pagination controls are omitted rather than shown disabled — an empty control row implies there's something to page through.
9. Edge Cases
Inputs that break naive pagination implementations.
Single page total — pagination should not render at all
1 of 1 page — most implementations conditionally hide the entire control when totalPages <= 1 rather than showing a disabled single button.
Current page in the middle of a huge set (page 500 of 999)
Narrow container — numbered control wraps to fewer visible numbers