Svelte – pagination
Setting up pagination in svelte.
Pagination will be built without ajax, i.e. on those elements that are already loaded.
Install the svelte-paginate package:
npm install -S svelte-paginate
Sample code:
let currentPage = one
let pageSize = ten
let allOperations = []
onMount(async () => {
getFetch(‘get-all-operations /’)…then((r) => {
items = r
});
});
$: paginatedItems = paginate({items, pageSize, currentPage})
{#await allOperations}
{:then allOperations}
{#each paginatedItems as operation}
<div class=“cell quantity”>{operation.quantity}div>
{/each}
{/await}
{#await allOperations}
{:then allOperations}
<LightPaginationNav
totalItems=“{items.length}”
pageSize=“{pageSize}”
currentPage=“{currentPage}”
limit=“{one}”
showStepOptions=“{true}”
on:setPage=“{(e) => currentPage = e.detail.page}”
/>
{/await}
As a result, we get the navigation:
The above example uses svelte to parse each array and load asynchronously in svelte.
