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.