widgets pagination

Description

The pagination widget allow the user to switch between pages of the results.

This is an alternative to using the show more pattern, that allows the user only to display more items. The show more pattern is usually preferred because it is simpler to use, and it is more convenient in a mobile context. See the infinite hits widget, for more information.

When using the pagination with Algolia, you should be aware that the engine won’t provide you pages beyond the 1000th hits by default. You can find more information on the Algolia documentation.

Live example

You can find an example at the end of the page or a live example in our widget showcase.

Usage

const search = instantsearch( /* parameters */ );

const widget = instantsearch.widgets.pagination({ 
  container: string|HTMLElement, 
  totalPages: [number], 
  padding: [number], 
  scrollTo: [string|HTMLElement|boolean], 
  showFirst: [boolean], 
  showLast: [boolean], 
  showNext: [boolean], 
  showPrevious: [boolean], 
  templates: [PaginationTemplates], 
  cssClasses: [PaginationCSSClasses], 
}: PaginationWidgetOptions);

search.addWidget(widget);

Options

PaginationWidgetOptions

• containerstring|HTMLElement

  CSS Selector or HTMLElement to insert the widget.

• totalPages[number]

  The max number of pages to browse.

• padding[number]
  Default value: 3

  The number of pages to display on each side of the current page.

• scrollTo[string|HTMLElement|boolean]
  Default value: 'body'

  Where to scroll after a click, set to false to disable.

• showFirst[boolean]
  Default value: true

  Whether to show the “first page” control

• showLast[boolean]
  Default value: true

  Whether to show the last page” control

• showNext[boolean]
  Default value: true

  Whether to show the “next page” control

• showPrevious[boolean]
  Default value: true

  Whether to show the “previous page” control

• templates[PaginationTemplates]

  Text to display in the links.

• cssClasses[PaginationCSSClasses]

  CSS classes to be added.

PaginationTemplates

• previous[string]

  Label for the Previous link.

• next[string]

  Label for the Next link.

• first[string]

  Label for the First link.

• last[string]

  Label for the Last link.

PaginationCSSClasses

• root[string|Array<string>]

  CSS classes added to the root element of the widget.

• noRefinementRoot[string|Array<string>]

  CSS class to add to the root element of the widget if there are no refinements.

• list[string|Array<string>]

  CSS classes added to the wrapping <ul>.

• item[string|Array<string>]

  CSS classes added to each <li>.

• itemFirstPage[string|Array<string>]

  CSS classes added to the first <li>.

• itemLastPage[string|Array<string>]

  CSS classes added to the last <li>.

• itemPreviousPage[string|Array<string>]

  CSS classes added to the previous <li>.

• itemNextPage[string|Array<string>]

  CSS classes added to the next <li>.

• itemPage[string|Array<string>]

  CSS classes added to page <li>.

• selectedItem[string|Array<string>]

  CSS classes added to the selected <li>.

• disabledItem[string|Array<string>]

  CSS classes added to the disabled <li>.

• link[string|Array<string>]

  CSS classes added to each link.

Widget

• render[function]

  Called after each search response has been received

• getConfiguration[function]

  Let the widget update the configuration of the search with new parameters

• init[function]

  Called once before the first search

Example

search.addWidget(
  instantsearch.widgets.pagination({
    container: '#pagination-container',
    totalPages: 20,
    // default is to scroll to 'body', here we disable this behavior
    scrollTo: false,
    showFirst: false,
    showLast: false,
  })
);

Can't find what you are looking for? Open an issue, we'll get back to you.