Svelte — пагинация

Admin Svelte

Настраиваем пагинацию в 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}

В результате получим навигацию:

В примере выше используется разбор массивов each в svelte и асинхронная загрузка в svelte.

Важно соблюдать название переменной items. С другой может показывать ошибки.

Если вам пригодилась информация, вы можете поблагодарить автора сайта символическим пожертвованием:

Добавить комментарий

Напишите свой комментарий, если вам есть что добавить/поправить/спросить по теме текущей статьи:
"Svelte — пагинация"