Pagination

Links to the pages of a long list.

Default
{component pagination,
	current: (int) ($request->query('page') ?? 1),
	total: 12,
/}

The pager is made of buttons that are plain links to ?page=N, the number Page::paginate() already reads. total is the page count, which Page::pageCount() gives for the same query, and current is the page being shown. The current page is outlined and marked aria-current="page", and the previous and next buttons are disabled at the ends. Nothing renders for one page or fewer.

{var $current = (int) ($request->query('page') ?? 1)}

{foreach $page->paginate('sort=-created') as $post}
	...
{/foreach}

{component pagination,
	current: $current,
	total: $page->pageCount('sort=-created'),
/}

siblings sets how many numbers show on each side of the current one, and the first and last page always show. href changes the link pattern, with {page} replaced by the number, for a pager that sits under another route or keeps other query parameters.

To swap only the results, put attrs: ['hx-boost' => 'true', 'hx-target' => '#results'] on the nav. Without JavaScript the links are plain navigation.

Params

Param Default Description
current 1 the current page number
total 1 how many pages there are, e.g. $page->pageCount(); nothing renders for 1 or fewer
href '?page={page}' every link's URL, with {page} replaced by the number
siblings 1 how many numbers show on each side of the current one
label 'Pagination' the nav's accessible name
class '' added to pagination
attrs [] any other attributes, e.g. ['hx-boost' => 'true', 'hx-target' => '#results']