Skip to main content

Pagination widget

stylefilter.addWidget(
  stylefilter.widgets.Pagination({
    container: "#products"
  })
);
stylefilter.addWidget(
  stylefilter.widgets.Pagination({
    container: '#yesplz-pagination',
  })
);

How to customize pagination templates and default template​

There are few parameters that should be set to edit html of the pagination.

stylefilter.addWidget(
  stylefilter.widgets.ProductsList({
    container: "#products",
    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: ``,
    }
  })
);

Additional parameters​

visiblePagesLimit - number​

Specify how many pages are rendered at a time.

default 7

containerClassName - string​

Class name for the main wrapping container