connectors connectPagination

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

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

• totalPages[number]

  The total 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'),
    totalPages: 20,
    padding: 4,
  })
);

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