Pagination в таблицах

Pagination в таблицах — это компонент, который обеспечивает удобную навигацию по большим наборам данных, разбивая их на страницы. В библиотеке Carbon Components Svelte реализована гибкая и настраиваемая система пагинации, полностью интегрируемая с таблицами.

Основы использования Pagination

В Carbon Components Svelte компонент пагинации импортируется напрямую:

import { Pagination } from 'carbon-components-svelte';

Компонент управляет несколькими ключевыми свойствами:

page — текущая страница (число).
pageSize — количество элементов на странице.
totalItems — общее количество элементов.
pageSizes — массив вариантов количества элементов на странице.
on:pageChange — событие, которое срабатывает при смене страницы.
on:pageSizeChange — событие, которое срабатывает при изменении количества элементов на странице.

Пример базовой конфигурации:

<Pagination
  page={1}
  pageSize={10}
  totalItems={100}
  pageSizes={[10, 20, 50]}
  on:pageChange={(e) => handlePageChange(e.detail)}
  on:pageSizeChange={(e) => handlePageSizeChange(e.detail)}
/>

Здесь handlePageChange и handlePageSizeChange — функции, отвечающие за загрузку данных для выбранной страницы и выбранного размера страницы соответственно.

Связь с таблицами

Для интеграции пагинации с таблицей DataTable необходимо синхронизировать:

Отображаемые строки таблицы с выбранной страницей.
Количество строк на странице с параметром pageSize пагинации.

Пример связки с таблицей:

<script>
  import { DataTable, Table, TableHead, TableRow, TableHeader, TableBody, TableCell } from 'carbon-components-svelte';
  import { Pagination } from 'carbon-components-svelte';

  let page = 1;
  let pageSize = 10;
  const totalItems = 100;

  let data = Array.from({ length: totalItems }, (_, i) => ({
    id: i + 1,
    name: `Item ${i + 1}`,
    value: Math.floor(Math.random() * 100)
  }));

  $: paginatedData = data.slice((page - 1) * pageSize, page * pageSize);

  function handlePageChange(newPage) {
    page = newPage;
  }

  function handlePageSizeChange(newSize) {
    pageSize = newSize;
    page = 1;
  }
</script>

<DataTable {paginatedData} headers={['ID', 'Name', 'Value']}>
  <Table>
    <TableHead>
      <TableRow>
        <TableHeader>ID</TableHeader>
        <TableHeader>Name</TableHeader>
        <TableHeader>Value</TableHeader>
      </TableRow>
    </TableHead>
    <TableBody>
      {#each paginatedData as row}
        <TableRow>
          <TableCell>{row.id}</TableCell>
          <TableCell>{row.name}</TableCell>
          <TableCell>{row.value}</TableCell>
        </TableRow>
      {/each}
    </TableBody>
  </Table>
</DataTable>

<Pagination
  {page}
  {pageSize}
  {totalItems}
  pageSizes={[10, 20, 50]}
  on:pageChange={(e) => handlePageChange(e.detail)}
  on:pageSizeChange={(e) => handlePageSizeChange(e.detail)}
/>

Здесь $: paginatedData автоматически пересчитывается при изменении page или pageSize, обеспечивая динамическую подгрузку строк таблицы.

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

Carbon Components Svelte позволяет настраивать визуальные аспекты пагинации через:

size — размер компонента ('sm' или 'md').
disabled — блокировка компонента.
showPageSizes — отображение селектора количества элементов на странице.

Пример кастомизации:

<Pagination
  page={page}
  pageSize={pageSize}
  totalItems={totalItems}
  pageSizes={[5, 10, 20]}
  size="sm"
  showPageSizes={true}
  on:pageChange={(e) => handlePageChange(e.detail)}
  on:pageSizeChange={(e) => handlePageSizeChange(e.detail)}
/>

Отслеживание событий

Компонент Pagination генерирует два основных события:

pageChange — возвращает номер новой страницы:

function handlePageChange(newPage) {
  console.log("Текущая страница:", newPage);
  page = newPage;
}

pageSizeChange — возвращает новое количество элементов на странице:

function handlePageSizeChange(newSize) {
  console.log("Новый размер страницы:", newSize);
  pageSize = newSize;
  page = 1;
}

Эти события позволяют полностью контролировать состояние таблицы и синхронизировать его с внешними источниками данных, например API.

Интеграция с асинхронными данными

При работе с серверными данными пагинация становится ключевым элементом управления запросами. Вместо фильтрации массива на клиенте выполняется запрос на сервер с параметрами page и pageSize.

async function fetchPageData(page, pageSize) {
  const response = await fetch(`/api/items?page=${page}&size=${pageSize}`);
  const result = await response.json();
  totalItems = result.total;
  data = result.items;
}

События пагинации напрямую вызывают обновление данных:

<Pagination
  {page}
  {pageSize}
  {totalItems}
  pageSizes={[10, 20, 50]}
  on:pageChange={(e) => fetchPageData(e.detail, pageSize)}
  on:pageSizeChange={(e) => fetchPageData(1, e.detail)}
/>