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 items = []
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>

{#await allOperations}
{:then allOperations}
on:setPage=“{(e) => currentPage =}”

As a result, we get the navigation:

The above example uses svelte to parse each array and load asynchronously in svelte.

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *