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