Developers
Authorization
API Resources
NL Interpreter
Search
Assist
Results Per Page Selector
Overview
This component displays a list of options that allows the user to set the number of results they want to display on the page.
This component must be linked to a search Store, since it updates the values of the search.
Usage
This is how you create this component:
sdk.component('results-per-page-selector', target: HTMLElement|String, options: Object);Sample
By default, this component looks like this:
Options
| Name | Type | Default | Description |
|---|---|---|---|
| options | Array | [5, 10, 15] |
The different selectable options. |
| placement | String | bottom-start |
The popup placement. See popper.js placements docs for valid values. |
| modifiers | Object | { flip: { behavior: ['right', 'bottom-start'], }, preventOverflow: { enabled: false } } |
The popup modifiers. See popper.js modifiers docs for valid values. |
Tracking
This component does a new search when the value changes, using the endpoint POST /federated-searches. This search is bound to the current session.
Example using the results component Store through the linkTo method
<div id="results-per-page-selector"></div>
<div id="results"></div>
<script>
var results = sdk.component('results', '#results');
var resultsPerPageSelector = sdk.component('results-per-page-selector', '#results-per-page-selector', {
options: [5, 6, 10],
});
results.linkTo(resultsPerPageSelector);
</script>