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.
This is how you create this component:
sdk.component('pagination', target: HTMLElement|String, options: Object);
By default, this component looks like this:
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 |
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 last page. |
This component does a new search when paginating, using the endpoint POST /federated-searches
. This search is bound to the current session.
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.