В Интернете есть много полезных материалов, которые дают хорошее представление о разбивке на страницы в ReactJs, а также о пакетах NPM, которые вы можете легко использовать. Как бы я ни ценил эти материалы и люблю использовать эти пакеты, они в основном умирают, когда сначала загружают весь набор данных на страницу, а затем полностью обрабатывают разбивку на страницы во внешнем интерфейсе. Я подхожу к этой статье с концепцией загрузки точных данных, необходимых на странице, а затем вручную загружаю другой набор данных на основе запроса, когда пользователь щелкает отображение номера страницы. Ниже представлена структура содержания, которая поможет нам разобраться в этой статье:
Оглавление
- Настройка проекта
- HTML и CSS стили
- Формат данных разбивки на страницы
- Пример запроса API
- Отображение исходных данных
- Отображение номера страницы и получение других данных
Настройка проекта
Мы собираемся использовать приложение create-response-app v0.1.0, в котором уже настроен модуль CSS. Откройте свой терминал и cd в папку, в которую вы хотите установить проект. Затем запустите следующую команду:
npx create-react-app pagination --use-npm
Приведенная выше команда загрузит проект в папку с именемpagination. Вам нужно cd в папку и запустить npm start. Если все пойдет хорошо, у вас будет страница, как показано ниже:
HTML и CSS стили
Откройте проект в своем любимом редакторе кода и найдите файл App.js. Нам нужно подготовить наш App.js, чтобы он выглядел точно так, как мы хотим, добавив HTML-код и стиль CSS ниже:
Создайте новый файл с именем App.module.css в том же каталоге, где находится ваш App.js, затем импортируйте его в свой App.js, используя:
import styles from './App.module.css';
Я хочу, чтобы мы сначала обработали отображение номера нумерации страниц, ниже - стиль и структура HTML того, что мы собираемся использовать.
Добавьте приведенное ниже содержание в свой App.module.css.
Извините за много кода, написанного до сих пор :), я хочу, чтобы у нас была красивая таблица со стилем разбивки на страницы, прежде чем мы перейдем к фактическому разбиению на страницы. Если все пойдет хорошо, ваше представление должно выглядеть так:
Формат данных разбивки на страницы
В большинстве случаев, когда вы выполняете вызовы API к конечной точке, которая возвращает данные с разбивкой на страницы, вам необходимо передать по крайней мере номер страницы с URL-адресом, поэтому образец URL-адреса будет выглядеть следующим образом:
https://reqres.in/api/users?page=2
Самая важная вещь, на которую следует обратить внимание в приведенном выше URL-адресе, - это page=2, где 2 - это набор данных с номерами страниц, который мы хотим получить. Это может быть 3,4 или любое число, равное набору данных, который у нас есть в бэкэнде.
Ответ всегда будет содержать три важных данных: per_page, total и actual data, которые мы хотим просмотреть. Пример ответа выглядит так:
Пример запроса API
Говоря о выполнении запроса API к бэкэнду, нам нужен бэкэнд, чтобы сделать запрос, я решил использовать https: // reqres .in / в качестве конечной точки API для этого руководства, потому что это бесплатно, всегда доступно и надежно. . Вы можете сделать запрос API прямо внутри ComponentDidMount() вашего компонента или отправить действие в redux из ComponentDidMount(), но для целей этого руководства мы собираемся сделать вызов API из App.js componentDidMount().
Во-первых, нам нужно установить состояние компонента, как показано ниже, внутри вашего App.js
users будет данными, которые мы собираемся перебрать, в то время как total и per_page помогут нам в вычислении логики разбиения на страницы, а current_page будет использоваться для стилизации активной ссылки разбиения на страницы.
Следующее, что нам нужно сделать, это создать вспомогательный метод, который будет служить цели выполнения HTTP-запроса к конечной точке API, а также обновлять состояние данными ответа. Метод будет выглядеть так:
Этот метод принимает параметр с именем pageNumber, поэтому его можно использовать повторно, и он всегда будет обновлять состояние с правильными данными при успешном ответе.
Поскольку при загрузке страницы нам нужно сделать HTTP-запрос к бэкэнду, и мы собираемся сделать это внутриcomponentDidMount(), вызвав указанный выше метод и передав ему номер первой страницы, который мы хотим, который должен быть 1. Следовательно, componentDidMount() будет как показано ниже:
Если мы добавим console.dir(this.state.users) внутрь метода render(), в консоли будет напечатано ниже
Нулевое значение было до прибытия данных, как только данные прибыли, он обновляет состояние, следовательно, массив данных пользователей.
Отображение исходных данных
Если необходимые данные получены, нам нужно просмотреть их в цикле и отобразить их. Следовательно, мы можем обновить наш метод рендеринга, чтобы он имел следующее:
Я заменил фиктивные данные, которые у нас были внутри ‹tbody› ‹/tbody›, на результат цикла, который я приравнял к users. У нас есть уверенность, что при изменении состояния ReactJs автоматически обновит содержимое таблицы. Заключительный этап - отображение логики страницы и получение другого содержимого на основе номера страницы, по которой щелкнули мышью, которое будет отправлено в конечную точку API.
Отображение номера страницы и получение других данных
Прежде чем мы поговорим об автоматическом отображении номера страницы с использованием желаемой логики, я хочу, чтобы мы вручную отображали эти номера и выполняли фактические вызовы API при нажатии на номера. А пока мы собираемся жестко закодировать номера нумерации страниц, как показано ниже:
При предварительном просмотре в браузере приведенный выше код будет выглядеть, как показано ниже.
Обратите внимание, что к каждому диапазону прикреплен обработчик событий, и я передал номер страницы этому обработчику событий, поэтому каждый раз, когда мы щелкаем ссылку разбиения на страницы, он будет делать новый HTTP-запрос и обновлять состояния компонентов, следовательно, данные таблицы пользователя . Мы не хотим жестко кодировать ссылки, как делали выше, поэтому нам нужно автоматически отображать эти ссылки.
Поэтому мы планируем показывать номера страниц для серии фрагментов данных, чтобы пользователи могли легко перемещаться по нескольким элементам. Прежде всего нам нужно знать несколько вещей:
- Страница, на которой мы находимся
- Общее количество предметов
- Количество элементов на странице
Хорошая новость заключается в том, что мы зафиксировали все это в состоянии нашего компонента.
Затем нам нужно посмотреть, как мы хотим отображать номера страниц, существует широкий спектр методов, которые люди используют:
- Простые кнопки "Далее" / "Назад" без цифр
- Список всех возможных страниц
- Страница 1 и последняя страница, с отображением текущей страницы (и 2 вверху / внизу)
Я лично предпочитаю показывать самую первую страницу, эту последнюю страницу, а затем текущую страницу с двумя страницами вверху и внизу. Так, например, на странице 12 из 24 мы увидим:
1, 10, 11, 12, 13, 14, 24
Это позволяет пользователям быстро переходить к началу и к концу, а также переходить по нескольким страницам одновременно. В рамках этого урока я собираюсь показать нам, как показать список всех возможных страниц (пункт два выше), а затем и пункт три.
Арифметика
Нам нужно вычислить общее количество страниц, для этого мы хотим взять общее количество элементов, которые есть, и разделить его на количество элементов на странице. Но мы хотим убедиться, что мы взяли это число и округлили его в большую сторону.
Таким образом, если бы всего было 12 элементов, и мы показывали бы 5 на каждой странице, у нас было бы в общей сложности 3 страницы элементов. Если бы мы отображали по 3 страницы на странице, мы бы показали 4 страницы.
Haven получил номера страниц, нам нужно пройти цикл, чтобы отобразить диапазон, поскольку мы хотим сначала показать все возможные числа, наш цикл будет выглядеть следующим образом:
Нам нужно обновить наше представление разбивки на страницы, чтобы оно выглядело так, как показано ниже:
Поздравляем, мы успешно обработали разбиение на страницы, сделали HTTP-запрос к бэкэнду и изменили содержимое таблицы, когда пользователь щелкает номер страницы, чтобы увидеть.
Чтобы быть уверенным, что мы
и мой взгляд как
ниже:
Мы можем изменить логику отображения номеров страниц на приведенную ниже, поскольку она подходит для большого набора данных.
Спасибо за прочтение.
Кредит: https://twitter.com/AbelAgoi
