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.
<nav
aria-label="pagination"
data-grid-control="pagination"
data-prev="«"
data-next="»"
data-first="First"
data-last="Last"></nav>
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 |
To define initial pagination values, the following settings may be passed to the initialization function:
<script>
datagrid({
currentPage: 0,
pageSize: 12,
pagesRange: 10
});
</script>
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 |
It is possible to entirely customize pagination HTML using the following callback function:
<script>
datagrid({
currentPage: 0,
pageSize: 12,
pagesRange: 10,
// render custom pagination HTML
renderPaginationControl: function(state, $control){
return 'any custom html';
}
});
</script>
If the pagination is empty, it has a
dg-pagination-empty CSS class. This way, it's possible to add special styles:.dg-pagination-empty{
display: none;
}
Last modified 2yr ago