Results Per Page Selector


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.


This is how you create this component:

sdk.component('results-per-page-selector', target: HTMLElement|String, options: Object);


By default, this component looks like this:


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.


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>

  var results = sdk.component('results', '#results');
  var resultsPerPageSelector = sdk.component('results-per-page-selector', '#results-per-page-selector', {
    options: [5, 6, 10],