Record (Запросы API) / Пагинация

В Nuxoblivius предусмотрена встроенная поддержка пагинации, что упрощает работу с постраничной загрузкой данных.

Важно!

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

Настройка пагинации в Record

По умолчанию пагинация в Record отключена. Чтобы её активировать, необходимо явно указать, где именно должен передаваться номер страницы — в query-параметре или в path-параметре.

---

Для этого используется первый аргумент метода:

• path:<name> — если требуется использовать как path-параметр
• query:<name> — если требуется использовать как query-параметр

Как path параметр

import { Record } from "nuxoblivius";

const posts = Record.new<Post>("/api/posts/{page}", []);

posts.pagination.setup("path:page");
/* Output: /api/posts/1 */

Как query параметр

import { Record } from "nuxoblivius";

const posts = Record.new<Post>("/api/posts", []);

posts.pagination.setup("query:page");
/* Output: /api/posts?page=1 */

---

Важно!

Для корректной работы пагинации необходимо настроить метод .template(). Именно он сообщает Record, сколько всего страниц доступно, чтобы можно было переключаться между ними.

import { Record } from "nuxoblivius";

const posts = Record.new<Post>("/api/posts", []);

posts.template((rawData) => ({ 
  data: rawData.items, 
  pageCount: rawData.meta.pageCount, 
})); 

Автоматический перезапуск запроса

При изменении параметров пагинации можно настроить автоматический повтор последнего запроса. Для этого в Record используется метод .autoReload(), который автоматически обновляет данные при переключении страниц.

import { Record } from "nuxoblivius";

const posts = Record.new<Post>("/api/posts", []);

posts.pagination.autoReload();

Информация о пагинации в Record

Для работы с пагинацией Record предоставляет ряд реактивных свойств, которые позволяют отслеживать текущее состояние:

• current — номер текущей страницы.
• lastPage — номер последней доступной страницы.
• isLastPage — булево значение, указывающее, является ли текущая страница последней.

---

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

import { Record } from "nuxoblivius";

const posts = Record.new<Post>("/api/posts", []);

console.log(
  posts.pagination.current, // 1
  posts.pagination.lastPage, // 10
  posts.pagination.isLastPage, // false
);

Управление страницей

Для удобного управления пагинацией в Record доступны как свойства, так и методы.

Изменение текущей страницы — current

Вы можете напрямую изменять свойство current, чтобы задать номер текущей страницы.

import { Record } from "nuxoblivius";

const posts = Record.new<Post>("/api/posts", []);

posts.pagination.current = 3; // Перейти на 3 страницу

---

Методы next() и prev()

Позволяют перемещаться на следующую или предыдущую страницу.

import { Record } from "nuxoblivius";

const posts = Record.new<Post>("/api/posts", []);

posts.pagination.next(); // Следующая страница
posts.pagination.prev(); // Предыдущая страница

---

Методы toFirst() и toLast()

Обеспечивают быстрый переход на первую или последнюю страницу.

import { Record } from "nuxoblivius";

const posts = Record.new<Post>("/api/posts", []);

posts.pagination.toFirst(); // Перейти на первую страницу
posts.pagination.toLast(); // Перейти на последнюю страницу

Динамическое включение и выключение пагинации

Пагинацию можно гибко контролировать — при необходимости её включать или отключать. Для этого у Record предусмотрено реактивное свойство enabled.

import { Record } from "nuxoblivius";

const posts = Record.new<Post>("/api/posts", []);

posts.pagination.enabled = true;