Пагинация больших данных

Для работы с большими объёмами данных в веб-приложениях критически важна эффективная пагинация. Библиотека Ant Design предоставляет компонент Pagination, который обеспечивает удобное управление страницами и интеграцию с таблицами, списками и другими компонентами отображения данных.

Компонент Pagination позволяет:

  • Разбивать данные на страницы.
  • Управлять размером страницы (pageSize).
  • Реагировать на изменение текущей страницы (current).
  • Настраивать общее количество страниц (total).

Простейший пример:

import { Pagination } from 'antd';
import React, { useState } from 'react';

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

  const onCha nge = page => {
    setCurrent(page);
    // Загрузка данных для новой страницы
  };

  return (
    <Pagination current={current} onCha nge={onChange} total={500} pageSize={20} />
  );
};

export default App;

В этом примере total задаёт общее количество элементов, а pageSize — количество элементов на одной странице. При изменении страницы вызывается функция onChange, позволяющая загружать новые данные.

Интеграция с таблицами

Для отображения больших массивов данных часто используют компонент Table. Ant Design поддерживает встроенную пагинацию через проп pagination:

import { Table } from 'antd';
import React, { useState, useEffect } from 'react';

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

const App = () => {
  const [data, setData] = useState([]);
  const [pagination, setPagination] = useState({ current: 1, pageSize: 10, total: 0 });
  const [loading, setLoading] = useState(false);

  const fetchData = async (page, pageSize) => {
    setLoading(true);
    const response = await fetch(`https://api.example.com/users?_page=${page}&_limit=${pageSize}`);
    const result = await response.json();
    const totalItems = parseInt(response.headers.get('X-Total-Count'), 10);
    setData(result);
    setPagination({ ...pagination, current: page, total: totalItems });
    setLoading(false);
  };

  useEffect(() => {
    fetchData(pagination.current, pagination.pageSize);
  }, []);

  const handleTableChange = (pag) => {
    fetchData(pag.current, pag.pageSize);
  };

  return (
    <Table
      columns={columns}
      dataSource={data}
      pagination={pagination}
      loading={loading}
      onCha nge={handleTableChange}
      rowKey="id"
    />
  );
};

export default App;

Ключевые моменты:

  • Проп pagination можно передать как объект с настройками: current, pageSize, total.
  • Обработчик onChange позволяет загружать новые данные при переключении страниц.
  • rowKey обеспечивает уникальность строк таблицы и предотвращает ошибки рендеринга.

Настройка размера страницы и отображение элементов

Компонент Pagination поддерживает изменение количества элементов на странице через проп showSizeChanger:

<Pagination
  current={current}
  onCha nge={onChange}
  total={500}
  pageSize={20}
  showSizeChanger
  onShowSizeCha nge={(current, size) => {
    setCurrent(1);
    // Загрузка данных с новым размером страницы
  }}
/>

При использовании showSizeChanger появляется возможность выбирать pageSize пользователю. Функция onShowSizeChange позволяет обновлять данные и сбрасывать номер текущей страницы.

Пагинация с серверной стороны

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

  • Сервер возвращает данные только для текущей страницы.
  • Заголовки ответа могут содержать общее количество элементов (X-Total-Count).
  • Клиент управляет current и pageSize, отправляя их на сервер.

Пример запроса к серверу:

fetch(`https://api.example.com/items?_page=${current}&_limit=${pageSize}`)

Серверная пагинация экономит память и ускоряет рендеринг больших таблиц.

Кастомизация отображения

Ant Design позволяет изменять внешний вид пагинации:

  • Стилизация кнопок через itemRender:
<Pagination
  total={500}
  itemRender={(page, type, originalElement) => {
    if (type === 'prev') return <a>Назад</a>;
    if (type === 'next') return <a>Вперёд</a>;
    return originalElement;
  }}
/>
  • Скрытие определённых элементов через showPrevNextJumpers, showQuickJumper.
  • Отображение полного списка страниц с помощью showTotal:
<Pagination
  total={500}
  showTotal={total => `Всего элементов: ${total}`}
/>

Оптимизация производительности

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

  1. Использовать rowKey в таблицах.
  2. Пагинацию разделять на серверную и клиентскую.
  3. Загрузка только текущей страницы данных.
  4. Кэширование ранее загруженных страниц при необходимости.
  5. Использовать React.memo для компонентов, не зависящих от текущей страницы.

Комбинация пагинации с фильтрацией и сортировкой

Ant Design позволяет сочетать пагинацию с фильтрацией и сортировкой:

const handleTableChange = (pag, filters, sorter) => {
  fetchData({
    page: pag.current,
    pageSize: pag.pageSize,
    sortField: sorter.field,
    sortOrder: sorter.order,
    filters,
  });
};
  • sorter.field и sorter.order передаются серверу для сортировки данных.
  • filters содержат выбранные пользователем фильтры.
  • При этом компонент Pagination автоматически синхронизируется с изменениями таблицы.

Выводы по работе с большими данными

  • Пагинация в Ant Design удобна и гибка: можно использовать как встроенные компоненты таблиц, так и отдельный Pagination.
  • Серверная пагинация — ключ к производительности при больших объёмах данных.
  • Кастомизация и интеграция с фильтрами/сортировкой делает интерфейс более дружелюбным и наглядным.
  • Оптимизация рендеринга через rowKey, кэширование и мемоизацию повышает скорость работы приложения.

Правильная комбинация этих инструментов позволяет строить интерфейсы, способные работать с сотнями тысяч записей без замедлений и потери удобства для пользователя.

Оглавление