All samples are using Ink.requireModules, please read how to use it at Ink.requireModules section

Ink.UI.Pagination class

Methods
Method name Description
new Pagination(selector, options) Constructor
.destroy() Unregisters the component and removes its markup
.getCurrent() Gets the current page index. First page is 0.
.getSize() Gets the number of pages
.hasNext() Checks if it has next pages
.hasNextPage() Checks if it has a next set of pages
.hasPrevious() Checks if it has previous pages
.hasPreviousPage() Checks if it has a previous set of pages
.isFirst() Checks if it's at the first page
.isLast() Checks if it's on the last page
.next([wrap]) Navigates to next item
.previous([wrap]) Navigates to the previous item
.setCurrent(nr, [isRelative], [wrap]) Sets the current page. First page is 0.
.setOnChange(onChange) Allows you to subscribe to the onChange event
.setSize(sz) Sets the number of pages to sz
.setSizeInItems(totalItems, itemsPerPage) An alternative to setSize, to define the number of pages in the Paginator.

new Ink.UI.Pagination(selector, options)

Accepts

  • selector

    Selector or element
  • options

    Options
  • options.size

    Number of pages.
  • options.totalItemCount

    Total number of items to display
  • options.itemsPerPage

    Number of items per page.
  • options.maxSize

    If passed, only shows at most maxSize items. displays also first|prev page and next page|last buttons
  • options.start

    Start page. defaults to 1
  • options.sideButtons

    trueWhether to show the first, last, previous, next, previousPage and lastPage buttons. Do not use together with maxSize.
  • options.firstLabel

    Text for the first page button. Defaults to 'First'.
  • options.lastLabel

    Text for the last page button. Defaults to 'Last'.
  • options.previousLabel

    Text for the previous button. Defaults to 'Previous'-
  • options.nextLabel

    Text for the next button. Defaults to 'Next'
  • options.previousPageLabel

    Text for the previous page button. Defaults to 'Previous {Items per page}'.
  • options.nextPageLabel

    Text for the next page button. Defaults to 'Next {Items per page}'.
  • options.onChange

    Callback to be called when a page changes. Called with `(thisPaginator, newPageNumber)`.
  • options.hashParameter

    Parameter to use on setHash. Defaults to 'page'.
  • options.parentTag

    HTML Tag used as the parent node.
  • options.childTag

    HTML Tag used as the child nodes.
  • options.wrapperClass

    CSS Class used in the wrapper element
  • options.paginationClass

    CSS Class used in the pagination element
  • options.activeClass

    CSS Class used to mark page as active
  • options.disabledClass

    CSS Class used to mark page as disabled
  • options.hideClass

    CSS Class used to hide elements
  • options.previousClass

    CSS Class used in the previous element
  • options.previousPageClass

    CSS Class used in the previous page element
  • options.nextClass

    CSS Class used in the next element
  • options.nextPageClass

    CSS Class used in the next page element
  • options.numberFormatter

    Number formatter function. Receives a 0-indexed page number, and the page count. Returns the text for the numbered page button.
  • options.autoWrap

    falseWhether to navigate to first page when clicking next in last page or vice-versa.

Basic Usage

Pagination just takes an element with the markup described in UI Elements: Pagination and creates the page numbers automatically.

It isn't very useful in and of itself, but some other UI components in Ink, such as the Table and the Carousel, use it internally.

Demo

Code

<nav class="ink-navigation" id="myPagination" data-size="5">
    <ul class="pagination black"></ul>
</nav>

<script>
    Ink.requireModules(['Ink.UI.Pagination_1'], function(Pagination){
        var basicPagination = new Pagination('#myPagination');
    });
</script>

You can use the maxSize option to limit the amount of pages shown.

Demo

Code

<nav class="ink-navigation" id="myPagination2" data-size="25" data-max-size="5">
    <ul class="pagination black"></ul>
</nav>
 
<script>
    Ink.requireModules(['Ink.UI.Pagination_1'], function(Pagination){
        var sizeLimitedPagination = new Pagination('#myPagination2');
    });
</script>

To configure your Pagination visually, refer to the documentation in UI Elements: Pagination

Code

<p>Dotted pagination:</p>
<nav class="ink-navigation" id="myPagination3" data-size="5">
    <ul class="pagination dotted"></ul>
</nav>

<p>Black pagination:</p>
<nav class="ink-navigation" id="myPagination4" data-size="5">
    <ul class="pagination black"></ul>
</nav>

<p>Chevron pagination:</p>
<nav class="ink-navigation" id="myPagination5" data-size="5">
    <ul class="pagination chevron"></ul>
</nav>

<script>
    ... (see above)
</script>

.destroy() method

Unregisters the component and removes its markup

.getCurrent() method

Gets the current page index. First page is 0.

.getSize() method

Gets the number of pages

.hasNext() method

Checks if it has next pages

.hasNextPage() method

Checks if it has a next set of pages

.hasPrevious() method

Checks if it has previous pages

.hasPreviousPage() method

Checks if it has a previous set of pages

.isFirst() method

Checks if it's at the first page

.isLast() method

Checks if it's on the last page

.next([wrap]) method

Navigates to next item

Accepts

  • wrap

    falseSet this to true if you want to go to the first item when going after the last item.

.previous([wrap]) method

Navigates to the previous item

Accepts

  • wrap

    falseSet this to true if you want to go to the last item when going before the first item.

.setCurrent(nr, [isRelative], [wrap]) method

Sets the current page. First page is 0.

Accepts

  • nr

    Sets the current page to given number.
  • isRelative

    falseIf you set this to `true`, the function will perform a relative change. (example: setCurrent(1) will move to the next page, while setCurrent(-1) will move to the previous page)
  • wrap

    falseSet this to true to wrap to the first page when moving past the last, and to wrap to the last page when moving before the first one.

.setOnChange(onChange) method

Allows you to subscribe to the onChange event

Accepts

  • onChange

    Callback called with `(thisPaginator, newPageNumber)`.

.setSize(sz) method

Sets the number of pages to sz

Accepts

  • sz

    number of pages

.setSizeInItems(totalItems, itemsPerPage) method

An alternative to setSize, to define the number of pages in the Paginator.

If you don't know how many pages you want, but know the amount of items you have and how many of them you want on each page, use this.

Accepts

  • totalItems

    Total number of items
  • itemsPerPage

    Items per page