Pagination

Pagination (постраничная навигация) является ключевым элементом пользовательского интерфейса при работе с большими наборами данных. В контексте SvelteKit использование UI-библиотек для реализации пагинации позволяет создавать интерактивные, отзывчивые и легко настраиваемые компоненты без необходимости вручную управлять состоянием страниц и логикой навигации.

Основные концепции

Пагинация делится на несколько важных аспектов:

  • Текущая страница (currentPage) — индекс активной страницы.
  • Общее количество страниц (totalPages) — определяется размером набора данных и количеством элементов на одной странице.
  • Размер страницы (pageSize) — количество элементов, отображаемых на одной странице.
  • События изменения страницы — обработчики, которые реагируют на смену текущей страницы и обновляют данные.

Пример структуры состояния для пагинации в SvelteKit:

let currentPage = 1;
let pageSize = 10;
let totalItems = 120;
let totalPages = Math.ceil(totalItems / pageSize);

Использование встроенных компонентов UI библиотек

Современные SvelteKit UI библиотеки, такие как Svelte Material UI (SMUI), SvelteKit UI, Skeleton UI, предоставляют готовые компоненты пагинации с настраиваемым интерфейсом:

<script>
  import { Pagination } from 'skeleton-ui';
  let currentPage = 1;
  const totalPages = 12;

  function handlePageChange(event) {
    currentPage = event.detail.page;
  }
</script>

<Pagination {currentPage} {totalPages} on:change={handlePageChange} />

Ключевые параметры:

  • currentPage — текущая выбранная страница.
  • totalPages — общее количество страниц.
  • on:change — событие, вызываемое при смене страницы.

Дополнительно компоненты поддерживают такие настройки, как отображение стрелок навигации, элементов первой/последней страницы и «скрытых» страниц с многоточием.

Динамическая пагинация с загрузкой данных

Для работы с большими наборами данных часто используется динамическая пагинация, когда данные подгружаются по мере смены страницы. В SvelteKit это можно реализовать через асинхронные функции и реактивные переменные:

<script>
  import { onMount } from 'svelte';
  import { Pagination } from 'skeleton-ui';

  let currentPage = 1;
  let pageSize = 20;
  let totalPages = 0;
  let items = [];

  async function fetchData(page) {
    const response = await fetch(`/api/items?page=${page}&limit=${pageSize}`);
    const data = await response.json();
    items = data.items;
    totalPages = data.totalPages;
  }

  $: fetchData(currentPage);

  function handlePageChange(event) {
    currentPage = event.detail.page;
  }
</script>

<ul>
  {#each items as item}
    <li>{item.name}</li>
  {/each}
</ul>

<Pagination {currentPage} {totalPages} on:change={handlePageChange} />

Особенности:

  • fetchData вызывается автоматически при изменении currentPage благодаря реактивной декларации $:.
  • Компонент Pagination управляет пользовательским вводом и передает выбранную страницу через событие change.
  • Поддержка серверной пагинации и API-запросов делает интерфейс отзывчивым и эффективным.

Настройка внешнего вида и адаптивность

UI библиотеки для SvelteKit позволяют тонко настраивать стили пагинации:

  • Размер кнопок (size="small" | "medium" | "large")
  • Цветовая схема (color="primary" | "secondary" | "accent")
  • Показывать/скрывать стрелки навигации (showArrows={true|false})
  • Мобильная оптимизация — компактный вид с ограничением количества видимых страниц и многоточием.

Пример с адаптивным отображением страниц:

<Pagination
  {currentPage}
  {totalPages}
  showArrows={true}
  maxVisiblePages={5}
  on:change={handlePageChange}
/>

Логика сложной пагинации

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

  • Всегда отображается первая и последняя страницы.
  • Скрытые промежуточные страницы заменяются многоточием (...).
  • Текущая страница выделяется визуально.
function getVisiblePages(currentPage, totalPages, maxVisible = 5) {
  const pages = [];
  const half = Math.floor(maxVisible / 2);
  let start = Math.max(1, currentPage - half);
  let end = Math.min(totalPages, currentPage + half);

  if (start > 1) pages.push(1, '...');
  for (let i = start; i <= end; i++) pages.push(i);
  if (end < totalPages) pages.push('...', totalPages);

  return pages;
}

Реализация подобной логики внутри Svelte компонента позволяет создавать динамически масштабируемую пагинацию, подходящую для интерфейсов с сотнями страниц.

Интеграция с SvelteKit страницами и маршрутами

SvelteKit обеспечивает возможность связывать пагинацию с URL-параметрами, что позволяет использовать прямые ссылки на определённые страницы:

<script>
  import { page } from '$app/stores';
  import { Pagination } from 'skeleton-ui';
  import { goto } from '$app/navigation';

  $: currentPage = +$page.url.searchParams.get('page') || 1;

  function handlePageChange(event) {
    goto(`?page=${event.detail.page}`);
  }
</script>

<Pagination {currentPage} {totalPages} on:change={handlePageChange} />

Преимущества такого подхода:

  • Состояние пагинации сохраняется в URL.
  • Поддержка истории браузера и кнопок «назад/вперед».
  • Возможность делиться ссылками на конкретные страницы.

Выводы по использованию Pagination

Пагинация в SvelteKit UI библиотеках сочетает удобство готовых компонентов с гибкостью кастомной логики. Ключевые возможности включают:

  • Интеграцию с реактивными переменными Svelte.
  • Поддержку асинхронной загрузки данных.
  • Настройку визуального отображения и адаптивность.
  • Лёгкое связывание с URL и маршрутизацией SvelteKit.

Эти подходы позволяют создавать эффективные и отзывчивые интерфейсы, подходящие как для малых проектов, так и для сложных корпоративных приложений.

Оглавление