Pagination
The pagination control splits HTML elements into multiple pages of content. It helps to improve the user experience in UI with a large number of items.
Data Attribute | Value | Description | Required |
data-grid-control | pagination | This attribute defines the control type. | Required |
data-prev | any text | The title of the previous button. | Optional |
data-next | any text | The title of the next button. | Optional |
data-first | any text | The title of the first button. | Optional |
data-last | any text | The title of the last button. | Optional |
data-hide-first-last | true, false (default) | If true, the first and the last button will be hidden. | Optional |
data-scroll-top | no value | If this data attribute exists, the page will scroll to the top each time a pagination button will be pressed. | Optional |
data-ul-class | pagination | The class of dynamically generated UL element. | Optional |
data-li-class | page-item | The class of dynamically generated LI elements. | Optional |
data-link-class | page-link | The class of dynamically generated A and SPAN elements. | Optional |
data-disabled-class | disabled | The class of disabled links. | Optional |
data-active-class | active | The class of the currently selected page. | Optional |
data-prev-class | page-prev | The class of the LI with the previous button. | Optional |
data-next-class | page-next | The class of the LI with the next button. | Optional |
data-first-class | page-first | The class of the LI with the first button. | Optional |
data-last-class | page-last | The class of the LI with the last button. | Optional |
How to define pagination values on page load
To define initial pagination values, the following settings may be passed to the initialization function:
Property | Value | Description | Required |
currentPage | number | The selected page starting from 0. The default is 0. | Optional |
pageSize | number | The number of items per page. The default is Infinity. | Optional |
pagesRange | number | The maximal number of pagination bullets that is visible at once. The default value is 10. | Optional |
Custom Pagination HTML
It is possible to entirely customize pagination HTML using the following callback function:
If the pagination is empty, it has a dg-pagination-empty
CSS class. This way, it's possible to add special styles:
Last updated