Пагинация с использованием серверной Django Rest Framework и Angular

Это статья о реализации разбивки на страницы в интерфейсе в Angular с использованием уже реализованной разбивки на страницы из серверной части с помощью Django Rest Framework. Здесь мы не используем сторонние библиотеки.

Примечание. Я бэкэнд-инженер и новичок в Angular. Просто подумал, что должен поделиться этим, потому что сначала мне было трудно понять, как это сделать в angular, но я, наконец, понял это. Любые предложения приветствуются и ценятся. Итак, здесь ничего не происходит:

Мы сосредоточимся на интерфейсной реализации, но если вы хотите также узнать, как реализовать разбиение на страницы в Django Rest Framework, вы можете попробовать ссылку на документацию DRF: здесь.

После реализации разбивки на страницы в бэкэнде Django запрос к бэкэнду вернет результаты в следующем формате:

"data": {
   "count": ,
   "next": "",
   "previous": "",
   "results": []
}

count: общее количество возвращенных элементов.

next: URL-адрес следующих элементов после разбивки на страницы.

предыдущий: URL-адрес предыдущих элементов после перехода к следующему. набор предметов

результаты: элементы, запрошенные из серверной части, явно разбиты на страницы, т.е. если для разбивки на страницы было задано 10 элементов, а было возвращено 15, результаты вернет 10 элементов по первому запросу, затем после перехода по URL-адресу в следующем, результаты вернут оставшиеся 5.

Введите Angular

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

Сервис

Наш сервис делает запрос к backend API.

Здесь наблюдатель getProperties принимает URL-адрес в качестве аргумента и отправляет запрос GET к внутреннему API для получения свойств.

Компонент

Здесь, когда компонент инициализируется, свойства загружаются на страницу. В функции setProperties мы вызываем наблюдателя getProperties, который возвращает ответ от внутреннего API. На основе этого ответа мы устанавливаем свойства, следующее и предыдущее свойства.

Функция fetchNext вызывается кнопкой "Далее" в шаблоне Html компонентов, как и функция fetchPrevious, которая вызывается кнопкой "Назад" в шаблоне Html, расположенном ниже.

После нажатия функция fetchNext будет вызывать наблюдателя getProperties с компонентами next property в качестве URL-адреса. аргумент. Это приведет к получению следующих элементов с разбивкой на страницы из API серверной части и установит для компонентов свойства свойство следующие элементы с разбивкой на страницы, таким образом обновив страницу и отобразив их. Аналогичным образом работает функция fetchPrevious.

Вот и все, вуаля. Так просто, верно! Надеюсь, это было полезно и важно.