Настраиваем пагинацию в svelte.
Пагинация будет строится без аякса, т.е. на тех элементах которые уже загружены.
Устанавливаем пакет svelte-paginate:
npm install -S svelte-paginate
Пример кода:
import {onMount} from "svelte";
import {paginate, LightPaginationNav} from 'svelte-paginate'
let items = []
let currentPage = 1
let pageSize = 10
onMount(async () => {
getFetch('get-all-operations/').then((r) => {
items = r
});
});
$: paginatedItems = paginate({items, pageSize, currentPage})
{#await items}
{:then items}
{#each paginatedItems as operation}
<div class="cell quantity">{operation.quantity}</div>
{/each}
{/await}
{#await items}
{:then items}
<LightPaginationNav
totalItems="{items.length}"
pageSize="{pageSize}"
currentPage="{currentPage}"
limit="{1}"
showStepOptions="{true}"
on:setPage="{(e) => currentPage = e.detail.page}"
/>
{/await}
import {paginate, LightPaginationNav} from 'svelte-paginate'
let items = []
let currentPage = 1
let pageSize = 10
onMount(async () => {
getFetch('get-all-operations/').then((r) => {
items = r
});
});
$: paginatedItems = paginate({items, pageSize, currentPage})
{#await items}
{:then items}
{#each paginatedItems as operation}
<div class="cell quantity">{operation.quantity}</div>
{/each}
{/await}
{#await items}
{:then items}
<LightPaginationNav
totalItems="{items.length}"
pageSize="{pageSize}"
currentPage="{currentPage}"
limit="{1}"
showStepOptions="{true}"
on:setPage="{(e) => currentPage = e.detail.page}"
/>
{/await}
В результате получим навигацию:
В примере выше используется разбор массивов each в svelte и асинхронная загрузка в svelte.
Важно соблюдать название переменной items. С другой может показывать ошибки.
