Мы часто участвуем в создании веб-приложений, где нам нужно получать большие наборы записей данных с удаленного сервера, API или базы данных. Например, если вы создаете платежную систему, она может получать тысячи транзакций. Если это приложение для социальных сетей, оно может получать множество пользовательских комментариев, профилей или действий. В любом случае существует несколько решений для представления данных таким образом, чтобы не перегружать конечного пользователя, взаимодействующего с приложением.

Одним из методов обработки больших наборов данных является использование Pагинации. Пагинация работает эффективно, когда вы заранее знаете размер набора данных (общее количество записей в наборе данных). Во-вторых, вы загружаете только необходимый фрагмент данных из общего набора данных на основе взаимодействия конечных пользователей с элементом управления разбиением на страницы. Это метод, используемый для отображения результатов поиска в Google Search.

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

Настройка проекта

Запустите новое приложение React с помощью команды create-react-app. Вы можете назвать приложение как хотите, например. react-pagination

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

Выполните следующую команду, чтобы установить необходимые зависимости, в этой установке styled-components:

Создание компонента разбивки на страницы

На этом шаге вы создадите компонент Pagination. Компонент Pagination отображает стрелку влево, вправо и все номера страниц.

Во-первых, давайте создадим каталог components в каталоге src. Затем создайте новый файл Pagination.js в директории src/components.

И добавьте к нему следующий фрагмент кода:

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

Также функция renderPageNumber() отвечает за всю логику, необходимую для генерации номеров страниц на основе текущей страницы и общей страницы.

Теперь мы можем импортировать и использовать этот компонент Pagination во всех типах наборов данных, вам просто нужно передать объект разбиения на страницы в качестве реквизита.