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.
1
<nav
2
aria-label="pagination"
3
data-grid-control="pagination"
4
data-prev="&laquo;"
5
data-next="&raquo;"
6
data-first="First"
7
data-last="Last"></nav>
Copied!
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:
1
<script>
2
datagrid({
3
currentPage: 0,
4
pageSize: 12,
5
pagesRange: 10
6
});
7
</script>
Copied!
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:
1
<script>
2
datagrid({
3
currentPage: 0,
4
pageSize: 12,
5
pagesRange: 10,
6
7
// render custom pagination HTML
8
renderPaginationControl: function(state, $control){
9
return 'any custom html';
10
}
11
});
12
</script>
Copied!
If the pagination is empty, it has a dg-pagination-empty CSS class. This way, it's possible to add special styles:
1
.dg-pagination-empty{
2
display: none;
3
}
Copied!
Last modified 10mo ago
Copy link