DataTable supports paging over the items in the data source. You enable and configure paging through the pager parameter.
Paging doesn't depend on the way you load data into DataTable: static or dynamic, external data file or database table. Datatable can display direction controls (that provide forward and backward navigation) as well as numeric controls that allow a user to move to a specific page.
Generally, you should just specify parameter pager with the required attributes.
Basic pager configuration
grid = new webix.ui({
view:"datatable",
...
pager:{
container:"paging_here",// the container where the pager controls will be placed into
size:100, // the number of records per a page
group:5 // the number of pages in the pager
}
})
Related sample: Static paging. Loading from an external data file
If you set the pager parameter, DataTable automatically adds controls for page navigation. You can customize those controls by specifying a certain template for them.
The template is set by the template attribute of the pager parameter and can contain the following values:
Depending on what you want to display on the paging area, add the related items to your template.
Using templates in pager
grid = new webix.ui({
view:"datatable",
...
pager:{
template:"{common.prev()} {common.pages()} {common.next()}",
container:"paging_here",
size:10,
group:5
}
});
Related sample: Using templates for pagers
Generally, using the mentioned values, you can set the following combinations for DataTable:
The first combination is set by default. Other available ones can be achieved with the help of templates (see the table below).
Mode | Image | Related template |
---|---|---|
Numeric | ![]() |
default mode, doesn't require specifying a separate template |
Next/Previous | ![]() |
template:" {common.prev()} {common.next()} " |
First/Previous/Next/Last | ![]() |
template:" {common.first()} {common.prev()} {common.next()} {common.last()}" |
Numeric/First/Last | ![]() |
template:" {common.prev()} {common.pages()} {common.next()}" |
Numeric/Next/Previous/First/Last | ![]() |
template:" {common.first()} {common.prev()} {common.pages()} {common.next()} {common.last()}" |
You can set some text instead of arrows for the Next, Previous, First and Last buttons.
Specifying custom labels for pager controls
webix.locale.pager = {
first: "First",// the first button
last: "Last",// the last button
next: "Next",// the next button
prev: "Prev"// the previous button
};
grid = new webix.ui({
view:"datatable",
...
pager:{
template:"{common.first()} {common.prev()} {common.pages()}
{common.next()} {common.last()}",
container:"paging_here",
size:10,
group:5
}
})
It's not obligatory to redefine all the mentioned buttons at once, you can redefine just a part of them. In this case, webix.locale.pager will contain just the required buttons.
Related sample: Pager localization
The size of a page is a number of items to display at once on a page. This number is set by the size attribute:
Setting the number of records on a page
pager:{
size:100, // the number of records on a page
...
}
Several pagers can be on one and the same page.
To add an additional pager to a page you should call method clone() and set there configuration of your new pager using the same attributes you use while defining the pager parameter:
Specifying 2 pagers on a page
grid = new webix.ui({
view:"datatable",
...
pager:{..}
});
grid.getPager().clone({
container:"paging_here",
size:10,
group:5
});
Related sample: Defining several pagers on a page
Back to top