Pagination Widget JS

Displays a pagination control for UX-JS.

Usage

searchstax.addPaginationWidget(container, options);
  • container – Element to render widget into
  • options – Configuration options (Read more)

Multiple Instances

Multiple instances of the Pagination widget can be added by calling the addPaginationWidget method multiple times with different target containers:

searchstax.addPaginationWidget('container1', options1);

searchstax.addPaginationWidget('container2', options2);

Each instance can be configured separately via its options object. This allows for the widget to be added to different locations on the page as needed.

Template Override

The pagination widget template option allows customizing the UI templates.

mainTemplate

Main template for the pagination controls.

templates: {

  mainTemplate: {
    template: `
      <div class="pagination">

        <button class="previous {{#isFirstPage}}disabled{{/isFirstPage}}">
          Previous
        </button>

        <span class="page-info">
          {{startIndex}} - {{endIndex}} of {{totalResults}}
        </span>

        <button class="next {{#isLastPage}}disabled{{/isLastPage}}">
          Next
        </button>

      </div>
    `
  }

}

The IPaginationData interface provides pagination metadata to use in the template.

Example

searchstax.addPaginationWidget('pagination', {

  templates: {

    mainTemplate: {
      template: `
        <div class="pagination">
          <a class="prev-btn"></a>
          <div class="page-info">1-10 of 100</div>
          <a class="next-btn"></a>
        </div>
      `,
      previousButtonClass: 'prev-btn',
      nextButtonClass: 'next-btn'
    }

  }

});

Questions?

Do not hesitate to contact the SearchStax Support Desk.