Pagination

Overview

This component displays a set of buttons with the numbers of the different pages taken by the current search. A click on one of these buttons updates the search with the results of the selected page.

This component must be linked to a search Store, since it retrieves the values of the last search pagination from it.

Usage

This is how you create this component:

sdk.component('pagination', target: HTMLElement|String, options: Object);

Sample

By default, this component looks like this:

Options

The following options can be set in this component:

Name Type Default Description
padding Integer 3 Number of pages to display around the active page. That mean that there is a maximum padding of * 2 + 1 button numbers displayed

Methods

The following Methods can be used in this component:

Method Description
goToPage(page: Integer) Gets the results of the desired page. You must provide the page number as parameter.
goToFirstPage() Gets the results of the first page.
goToPreviousPage() Gets the results of the previous page.
goToNextPage() Gets the results of the next page.
goToLastPage() Gets the results of the next page.

Tracking

This component does a new search when paginating, using the endpoint POST /federated-searches. This search is bound to the current session and the tracking option set to true.

Example using the results component Store, through the linkTo method

<div id="pagination"></div>
<div id="results"></div>

<script>
  var pagination = sdk.component('pagination', '#pagination', {
    padding: 2
  });
  var results = sdk.component('results', '#results');
  results.linkTo(pagination);
</script>

In this example, the pagination component gets the pagination options from the results component store.