Пагинация

DataTable поддерживает разбиение на страницы в источнике данных. Вы можете включить и настроить пагинацию с помощью параметра pager.

Разбиение на страницы не зависят от способа загрузки данных в DataTable: статический или динамический, внешний файл данных или таблица базы данных.

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

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

Базовая конфигурация Pager

webix.ui({
    view:"datatable",
    pager:{
        size:100, // число записей на странице
        group:5   // число кнопок в пейджере
    }
})

Related sample:  Static Paging. Loading from an External Data File

You can read more about pagination in Webix tutorials.

Контролы

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

Темплейт задается с помощью атрибута template параметра pager и может содержать следующие значения:

  1. {common.first()} - кнопка для перемещения на первую страницу.
  2. {common.prev()} - кнопка для перемещения на предыдущую страницу.
  3. {common.next()} - кнопка для перемещения на следующую страницу.
  4. {common.last()} - кнопка для перемещения на последнюю страницу.
  5. {common.pages()} - кнопки с цифрами для перехода на определенную страницу.

Использование темплейта

webix.ui({
    view:"datatable",
    pager:{
        template:"{common.prev()} {common.pages()} {common.next()}",
        size:10,
        group:5
    }
});

Related sample:  Using Templates for Pagers

Используя упомянутые значения вы можете устанавливать следующие сочетания:

  • Числовые (по умолчанию)
  • Следующая/Предыдущая
  • Первая/Предыдущая/Следующая/Последняя
  • Числовые/Первая/Последняя
  • Числовые/Следующая/Предыдущая/Первая/Последняя

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

Таблица 1 Комбинации контролов
Режим Изображение Темплейт
Числовые режим по умолчанию, не требует указания отдельного темплейта
Следующая/Предыдущая template:" {common.prev()} {common.next()} "
Первая/Предыдущая/Следующая/Последняя template:" {common.first()} {common.prev()} {common.next()} {common.last()}"
Числовые/Первая/Последняя template:" {common.prev()} {common.pages()} {common.next()}"
Числовые/Следующая/Предыдущая/Первая/Последняя template:" {common.first()} {common.prev()} {common.pages()} {common.next()} {common.last()}"

Настройка ярлыков

Вы можете установить какой-нибудь текст вместо стрелок для кнопок Следующая, Предыдущая, Первая, Последняя.

Текстовые ярлыки для контролов

webix.locale.pager = {
    first: "First", // первая
    last: "Last", // последняя
    next: "Next", // следующая
    prev: "Prev"  // предыдущая
};
 
webix.ui({
    view:"datatable",
    pager:{
        template:`{common.first()} {common.prev()} {common.pages()}
            {common.next()} {common.last()}`,
        size:10,
        group:5
    }
})

Не обязательно переопределять все упомянутые кнопки сразу, вы можете переопределить только часть из них. В этом случае webix.locale.pager будет содержать только требуемые кнопки.

Related sample:  Pager Localization

Размер

Размер пейджера - это количество элементов для отображения одновременно на странице. Это число устанавливается атрибутом size:

Установка числа записей на странице

pager:{
    size:100,  // число записей на странице
    ...
}

Несколько пагинаций на странице

На странице может быть сразу несколько пейджеров.

Чтобы добавить дополнительный пейджер, вызовите метод method clone() и задайте ему конфигурацию нового пейджера используя теже атрибуты, которые вы используете для параметра pager:

Задание двух пейджеров на странице

webix.ui({
    view:"datatable",
    pager:{..}
});
 
grid.getPager().clone({
    size:10,
    group:5
});

Related sample:  Defining Several Pagers on a Page

Наверх
If you have not checked yet, be sure to visit site of our main product Webix web development library and page of datagrid javascript product.