Пагинация

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

Вы можете прочитать больше о пагинации в туториалах Webix .

Контролы

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

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

• {common.first()} - кнопка для перемещения на первую страницу
• {common.prev()} - кнопка для перемещения на предыдущую страницу
• {common.next()} - кнопка для перемещения на следующую страницу
• {common.last()} - кнопка для перемещения на последнюю страницу
• {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

Наверх