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="&laquo;"
    data-next="&raquo;"
    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

How to define pagination values on page load

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

Custom Pagination HTML

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;
}