widgets pagination

Edit this page

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

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

const widget = instantsearch.widgets.pagination({ container: string|HTMLElement, maxPages: [number], padding: [number], scrollTo: [string|HTMLElement|boolean], showFirstLast: [boolean], autoHideContainer: [boolean], labels: [PaginationLabels], cssClasses: [PaginationCSSClasses], }: PaginationWidgetOptions);
search.addWidget(widget);

Options

PaginationWidgetOptions

  • containerstring|HTMLElement

    CSS Selector or HTMLElement to insert the widget.

  • maxPages[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.

  • showFirstLast[boolean]
    Default value: true

    Define if the First and Last links should be displayed.

  • autoHideContainer[boolean]
    Default value: true

    Hide the container when no results match.

  • labels[PaginationLabels]

    Text to display in the various links (prev, next, first, last).

  • cssClasses[PaginationCSSClasses]

    CSS classes to be added.

PaginationLabels

  • 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 parent <ul>.

  • item[string|Array<string>]

    CSS classes added to each <li>.

  • page[string|Array<string>]

    CSS classes added to page <li>.

  • previous[string|Array<string>]

    CSS classes added to the previous <li>.

  • next[string|Array<string>]

    CSS classes added to the next <li>.

  • first[string|Array<string>]

    CSS classes added to the first <li>.

  • last[string|Array<string>]

    CSS classes added to the last <li>.

  • active[string|Array<string>]

    CSS classes added to the active <li>.

  • disabled[string|Array<string>]

    CSS classes added to the disabled <li>.

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',
    maxPages: 20,
    // default is to scroll to 'body', here we disable this behavior
    scrollTo: false,
    showFirstLast: false,
  })
);

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