Usage with HTML Attribute
<div class="pagination" data-aau="pagination" data-totalpages="10"></div>
Usage with Javascript
$('#pagination').pagination();
HTML Attributes
Name Type Default Required Description Example
data-pagesnumbers Boolean true no Whether or not the pages numbers are shown
<div data-aau="pagination"
data-pagesnumbers="false"></div>

This will only show the previous & next buttons.

data-numberofpages Number 5 no Number of pages numbers shown
<div data-aau="pagination"
data-numberofpages="10"></div>

This will only show 10 pages numbers.

data-totalpages Number 0 no Total number of pages. The default value is 0, which means the pagination works indefinitely (not "first" and no "last").
<div data-aau="pagination"
data-totalpages="20"></div>

Pagination has 20 pages.

data-currentpage Number 1 no First page selected
<div data-aau="pagination"
data-currentpage="4"></div>

This will first select the page 4.

data-smallsize Boolean false no Indicates if the pagination has to be in small size (like in the calendar). In small size, the pagination does not display the page numbers, it spins indefinitely and the design is slightly different.
<div data-aau="pagination"
data-smallsize="true"></div>
data-prevtext String "Previous" no Text of the previous button
<div data-aau="pagination"
data-prevtext="prev"></div>
data-nexttext String "Next" no Text of the next button
<div data-aau="pagination"
data-nexttext="next"></div>
data-arrows Boolean true no Whether or not the previous and next buttons have an arrow
<div data-aau="pagination"
data-arrows="false"></div>
Using Options with Javascript

You can use the options with Javascript by passing them in an object without the prefix "data-" in the option name.

$('#pagination').pagination({
  numberofpages: 10,
  totalpages: 25
});

Methods

Name Parameters Description Example
noClick Boolean : disable (true) or enable the click (false) Disable/enable the click action on the buttons $('.pagination').pagination('noClick', true)
toggleLoader 1. String: 'prev' or 'next' to show button loading.
2. Boolean: enable (true) or disable (false)
Disable/enable loading animation on the arrows $('.pagination').pagination('toggleLoader', 'prev', true)
Event
Name Description Parameters Example
'PaginationClick' Fired when button has been selected

type: button type: 'prev' (previous button), 'next' (next button), 'page' (page number)

page: index of the page selected.

  $('#pagination').on('PaginationClick', function (ev, data) {
    console.log(data.type + ' button clicked | page selected : ' + data.page);
  });
9-B Previous / Next
<div class="pagination" data-aau="pagination" data-pagenumbers="false" data-totalpages="10"></div>
Live Example
Small size
<div class="pagination small" data-aau="pagination" data-smallsize="true" ></div>
Live Example

Sign In