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

Last updated