connectors connectPagination

Edit this page

Description

Pagination connector provides the logic to build a widget that will let the user choose the current page of the results.

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.

Usage

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

const makePagination= instantsearch.connectors.connectPagination(
function renderFn(
renderOpts: PaginationRenderingOptions,
isFirstRendering: boolean) {
// render the custom Pagination widget
} );

const customPagination = makePagination(instanceOpts: CustomPaginationWidgetOptions);
search.addWidget(customPagination);

Connector options

PaginationRenderingOptions

  • createURL(page) => string

    Creates URLs for the next state, the number is the page to generate the URL for.

  • currentRefinementnumber

    The number of the page currently displayed.

  • nbHitsnumber

    The number of hits computed for the last query (can be approximated).

  • nbPagesnumber

    The number of pages for the result set.

  • pagesArray<number>

    The actual pages relevant to the current situation and padding

  • isFirstPageboolean

    true if the current page is also the first page

  • isLastPageboolean

    true if the current page is also the last page

  • refine(page) => undefined

    Sets the current page and trigger a search.

  • widgetParamsObject

    All original CustomPaginationWidgetOptions forwarded to the renderFn.

CustomPaginationWidgetOptions

  • maxPages[number]

    The max number of pages to browse.

  • padding[number]
    Default value: 3

    The padding of pages to show around the current page

Example

// custom `renderFn` to render the custom Pagination widget
function renderFn(PaginationRenderingOptions, isFirstRendering) {
  if (isFirstRendering) {
    PaginationRenderingOptions.widgetParams.containerNode.html('<ul></ul>');
  }

  // remove event listeners before replacing markup
  PaginationRenderingOptions.widgetParams.containerNode
    .find('a[data-page]')
    .each(function() { $(this).off('click'); });

  var pages = PaginationRenderingOptions.pages
    .map(function(page) {
      return '<li style="display: inline-block; margin-right: 10px;">' +
        '<a href="' + PaginationRenderingOptions.createURL(page) + '" data-page="' + page + '">' +
        (parseInt(page) + 1) + '</a></li>';
    });

  PaginationRenderingOptions.widgetParams.containerNode
    .find('ul')
    .html(pages);

  PaginationRenderingOptions.widgetParams.containerNode
    .find('a[data-page]')
    .each(function() {
      $(this).on('click', function(event) {
        event.preventDefault();
        PaginationRenderingOptions.refine($(this).data('page'));
      });
    });
}

// connect `renderFn` to Pagination logic
var customPagination = instantsearch.connectors.connectPagination(renderFn);

// mount widget on the page
search.addWidget(
  customPagination({
    containerNode: $('#custom-pagination-container'),
    maxPages: 20,
    padding: 4,
  })
);


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