Pagination

Компонент Pagination в библиотеке Ant Design используется для организации постраничного отображения данных, упрощая навигацию по спискам и таблицам. Он предоставляет гибкие возможности настройки, включая размер страницы, текущее положение, общее количество страниц и пользовательские элементы управления.

import { Pagination } from 'antd';

<Pagination defaultCurrent={1} total={50} />

В этом примере создаётся пагинация с 50 элементами и текущей страницей 1. По умолчанию компонент использует горизонтальную ориентацию и стандартный размер кнопок.

Основные свойства

  • current: число, указывающее на текущую страницу.
  • defaultCurrent: начальная страница при инициализации компонента.
  • total: общее количество элементов. Используется для вычисления числа страниц.
  • pageSize: количество элементов на одной странице (по умолчанию 10).
  • defaultPageSize: размер страницы при первой отрисовке.
  • onChange: функция, вызываемая при смене страницы. Принимает два аргумента: номер страницы и размер страницы.
  • showSizeChanger: boolean, активирует выбор размера страницы пользователем.
  • pageSizeOptions: массив значений, которые пользователь может выбрать, если включён showSizeChanger.

Пример с обработкой события смены страницы:

<Pagination
  defaultCurrent={1}
  total={100}
  pageSize={10}
  onCha nge={(page, pageSize) => {
    console.log('Страница:', page, 'Размер страницы:', pageSize);
  }}
/>

Контроль размеров и отображение элементов

Пагинацию можно делать компактной или крупной, используя свойство size:

<Pagination size="small" total={50} />
<Pagination size="large" total={50} />

Также поддерживаются дополнительные элементы управления:

  • showQuickJumper: позволяет пользователю быстро перейти на любую страницу через ввод числа.
  • showTotal: функция для отображения общего количества элементов, например:
<Pagination
  total={85}
  showTotal={(total) => `Всего элементов: ${total}`}
/>

Пагинация с управлением страницами и страницами на компоненте Table

Компонент Table в Ant Design тесно интегрирован с Pagination. Настройка пагинации внутри таблицы происходит через свойство pagination:

import { Table } from 'antd';

const columns = [
  { title: 'Имя', dataIndex: 'name', key: 'name' },
  { title: 'Возраст', dataIndex: 'age', key: 'age' },
];

const data = [
  { key: 1, name: 'Иван', age: 32 },
  { key: 2, name: 'Мария', age: 28 },
  // ...
];

<Table
  columns={columns}
  dataSource={data}
  pagination={{ pageSize: 5, showSizeChanger: true }}
/>

В этом примере таблица автоматически делит данные на страницы по 5 элементов и предоставляет пользователю выбор размера страницы.

Управляемая и неуправляемая пагинация

  • Неуправляемая: используются defaultCurrent и defaultPageSize. Компонент самостоятельно отслеживает состояние страницы.
  • Управляемая: используются current и pageSize. Состояние страницы полностью контролируется внешним кодом, например, через useState в React:
import { useState } from 'react';
import { Pagination } from 'antd';

const ControlledPagination = () => {
  const [current, setCurrent] = useState(1);

  return (
    <Pagination
      current={current}
      total={50}
      onCha nge={(page) => setCurrent(page)}
    />
  );
};

Кастомизация элементов пагинации

Ant Design позволяет изменять отображение кнопок и навигации:

  • itemRender: функция для изменения рендеринга каждой кнопки. Аргументы: page, type, originalElement.

Пример замены кнопок «prev» и «next»:

<Pagination
  total={50}
  itemRender={(page, type, originalElement) => {
    if (type === 'prev') return <a>Назад</a>;
    if (type === 'next') return <a>Вперед</a>;
    return originalElement;
  }}
/>
  • responsive: адаптирует отображение пагинации на разных экранах.

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

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

const fetchData = async (page, pageSize) => {
  const response = await fetch(`/api/users?page=${page}&limit=${pageSize}`);
  const data = await response.json();
  return data;
};

<Pagination
  current={currentPage}
  total={totalItems}
  pageSize={pageSize}
  onCha nge={async (page, size) => {
    setCurrentPage(page);
    const data = await fetchData(page, size);
    setTableData(data);
  }}
/>

Таким образом достигается оптимизация работы с большим количеством данных и сокращение нагрузки на клиент.

Полезные советы по использованию

  • Сочетание с Table: всегда учитывать, что таблица может управлять пагинацией сама, поэтому передавать свои current и pageSize только при управляемой логике.
  • Динамическое изменение pageSize: обновление pageSize автоматически пересчитывает количество страниц.
  • Отображение total: для пользовательского интерфейса полезно отображать общее количество элементов.
  • Адаптивность: использование responsive или size="small" для мобильных устройств делает интерфейс удобнее.

Pagination в Ant Design — это мощный инструмент для постраничного управления данными с гибкой настройкой визуальных элементов, интеграцией с таблицами и поддержкой как локальной, так и серверной логики.

Оглавление