Pagination Widget

The Pagination widget provides a interface for navigating through multiple pages of search results. It displays page numbers and navigation controls, allowing users to move between different result pages.

Example Usage

Text Search

const textsearch = window.yesplz.textsearch();

textsearch.addWidget(
  textsearch.widgets.Pagination({
    container: "#yesplz-pagination",
    visiblePagesLimit: 10,
  })
);

Dual Search

const dualsearch = window.yesplz.dualsearch();

dualsearch.addWidget(
  dualsearch.widgets.Pagination({
    container: "#yesplz-pagination",
    visiblePagesLimit: 10,
  })
);

Parameters

Name	Type	Description
container	string	CSS selector for the HTML element where the widget will be rendered.
visiblePagesLimit	integer	Maximum number of page links to display at once.
templates	object	Custom templates for rendering different parts of the pagination widget.

visiblePagesLimit

Default: 7

This parameter controls the maximum number of page links that will be visible at any given time.

templates

The templates parameter allows you to customize the HTML structure of the pagination widget.

This is the default templates and you can provide custom templates for different parts of the widget:

textsearch.addWidget(
  textsearch.widgets.Pagination({
    container: "#yesplz-pagination",
    templates: {
      main: `<div class="paging">{{{pagesHtml}}}</div>`,
      page: `<a data-page="{{page}}" href="#">{{page}}</a>`,
      currentPage: `<strong class="on">{{page}}</strong>`,
      prevPage: `<a data-page="{{page}}" href="#">&lt;</a>`,
      prevPageDisabled: ``,
      nextPage: `<a data-page="{{page}}" href="#">&gt;</a>`,
      nextPageDisabled: ``,
      firstPage: `<a data-page="{{page}}" href="#">&lt;&lt;</a>`,
      firstPageDisabled: ``,
      lastPage: `<a data-page="{{page}}" href="#">&gt;&gt;</a>`,
      lastPageDisabled: ``,
    },
  })
);

Template Descriptions:

• main: The overall container for the pagination widget. {{{pagesHtml}}} is where all the generated page links will be inserted.
• page: Template for regular page number links. data-page="{{page}}" sets a data attribute with the page number.
• currentPage: Template for the current page number.
• prevPage and nextPage: Templates for previous and next page navigation links.
• prevPageDisabled and nextPageDisabled: Templates for disabled previous and next page links. These are empty by default, effectively hiding the links when disabled.
• firstPage and lastPage: Templates for first and last page navigation links.
• firstPageDisabled and lastPageDisabled: Templates for disabled first and last page links, also empty by default.