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. С другой может показывать ошибки.

На сайте отсутствует реклама! Значете почему?

Помогать людям - моё хобби. А навыки разработчика позволяют не парится нулевой монетизизацией этого сайта. Хотя...

Если вам помогла информация, то даже от доната в 40 рублей мне будет приятно. Докину немного, куплю латте в макдаке, вспомню за чей счет банкет и карма вам зачтется!

Но и просто оставленный комментарий благодарности ниже принесет мне улыбку радости :)

А если захочется написать всякие гадости с переходом на личности, да тоже не стесняйтесь, но обычно я отправляю такое в спам. Люблю, когда дома чисто.

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

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