Pagination

Default Pagination

The default Pagination displays 25 Items with a full list of available Pages. Clicking on a pageNr automaticly updates the content displayed on screen. If you are on the first or last page, the forward or backward button will be disabled.

To design your item, you need a root-Element that is asigned to the body-slot in order to accces the current item: <div slot="body" let:prop={item}></div>. If you have Typescript enabled, all your items properties and functions will be autocompletet for a more stable development process.

<Pagination items={users}>
	<div class="card" slot="body" let:prop={user}>
		<div class="card-header">{user.firstName} {user.lastName}</div>
		...
	</div>
</Pagination>

Custom nr of items per Page

If you want to display less items (or more) simply define the number with the perPage Attribute. The Page-control will generate the appropiate nr of pages needed.

<Pagination items={users} perPage={4}}>
	<div class="card" slot="body" let:prop={user}>
		...
	</div>
</Pagination>

Controlable Nr of Items

To include a control-Element for the displayable nr of items, you need to append the elements to the pageControl slot. Changing the perPage Value automaticly updates the controls. If your current active page will be deleted due to less available Pages, the last page will be automaticly selected.

<Pagination items={users} {perPage}}>
	<div class="card" slot="body" let:prop={user}>
		...
	</div>
	<div slot="pageControl">
		<input type="number" bind:value={perPage} />
	</div>
</Pagination>

Compact Pages

If you want to display a compact pageControl instead of all 20 or more available Pages, you can use lookupPages. That way the next and previous nr pages will be clickable, in addition to the first and last 2 pages.

<Pagination items={users} perPage={1} lookupPages={2}>
	<div class="card" slot="body" let:prop={user}>
		...
	</div>
</Pagination>

Jump to Page

Under certain circumstances you want to include a way to directly jump to a Page. With pageControl slot and the currentPage value you can include such a feature. Doing it this way was a councious choice to allow you the artistic freedom of your own pagination-control.

Don't worry, your user can not go outside the available range.

<Pagination items={users} perPage={1} lookupPages={1} bind:currentPage>
	<div class="card" slot="body" let:prop={user}>
		...
	</div>
	<div slot="pageControl">
		<input type="number" class="form-control" bind:value={currentPage} />
	</div>
</Pagination>

Filter Items

	<Pagination items={users.filter(() => {...})} {perPage}}>
		<div class="card" slot="body" let:prop={user}>
			...
		</div>
		<div slot="pageControl">
			<input type="text" bind:value={searchname} />
		</div>
	</Pagination>

	<Pagination items={users.filter(customFilterFunction)} {perPage}}>
		<div class="card" slot="body" let:prop={user}>
			...
		</div>
		<div slot="pageControl">
			<input type="text" bind:value={searchname} />
		</div>
	</Pagination>

Working with filtered Items from URL

If you can't load all items at once, to keep your webapp user friendly, you can still use this Pagination. It just required a bit of work, the noControl Attribute and the manual inclusion of PaginationControl. Make sure to keep the perPage the same and bind the currentPage to ensure a stable pageChange. By listening to the events you can request your items and update the pagination.

This example implies your Response has the already filtered Items and the max nr of available items.

<Pagination items={users} perPage={4} noControl>
	<div class="card" slot="body" let:prop={user}>
		...
	</div>
</Pagination>
<PaginationControl numberItems={maxitems} perPage={4} bind:currentPage on:pageChanged={customFunction}>
		<div slot="pageControl">
			{#await promise}
				<i class="fas fa-spinner fa-spin"></i>
			{:catch err}
				<p class="alert alert-danger">An error occured</p>
			{/await}
		</div>
	</PaginationControl>

CSS

Anything below shows things possible with CSS. A seperate CSS-file is required.