Paginate

Questions or comments?

Unstable feature

To be used at your own risk. This feature described below can be removed in any subsequent minor/major release

Learn more about the design decision around provisional features.

Check other provisional features available.

Purpose

Adds pagination at the bottom of a list of items.

Use when

You want to split into multiple pages an extensive list of items.

Working example

English example

French example

How to implement

  1. Add the CSS classes wb-paginate and provisional to an element or a group of elements to be paginated. Simply add a JSON object as its value, i.e.:

    <div class="wb-paginate provisional" data-wb-paginate='{
	"appendUI": false,
	"itemsPerPage": 12
}'>
    If set on a <table>
    Otherwise specified, it will select all rows (<tr>).
    If set on a <ul>
    Otherwise specified, it will select all <li>
    If set on any other element, like <section>, <article> or <div>
    Otherwise specified, it will select all direct children of the element.
  2. To avoid a flicker on page load, you can add the CSS class wb-pgfltr-out to all your items.
  3. Test the feature to see if it is properly configured and shows the pagination correctly.
  4. In the event that you have a complex HTML structure or need a different output, see the configuration options below and make your own adjustments.

Configuration options

All configuration options of the plugin are controlled by the data-wb-paginate attribute.

Option Description Type Default
uiTarget Sets the selector for the element that will hold the pagination. If not defined, the UI will be inserted after the section (if defined) or after the element. In the case of a <table> or a <ul>, the code will be inserted after the element even if the section property is defined. String (CSS selector) undefined
itemsPerPage Defines the amount of items visible per page. Number 25
section Sets the selector for the element that will group the items. String (CSS selector)
For <table> element
tbody
For any other element
undefined
selector Sets the selector for the items that will be hidden or shown depending on the page. String (CSS selector)
For <table> element
tr
For <ul> element
li
For any other element
> *

Events

The following events can be used to interact with the plugin.

Event Trigger What it does
wb-init.wb-paginate Triggered manually (e.g., $( ".wb-paginate" ).trigger( "wb-init.wb-paginate" );). Initializes the paginate plugin and creates the user interface (UI). Note: the pagination plugin will be initialized automatically unless the .wb-paginate element is added after the page has already loaded.
wb-ready.wb-paginate Triggered automatically after the paginate plugin initializes. Used to identify when and where the paginate plugin initializes (target of the event). 
$( document ).on( "wb-ready.wb-filter", ".wb-filter", function( event ) {
});
$elm.on( "wb-ready.wb-filter", function( event ) {
});
wb-ready.wb Triggered automatically when WET has finished loading and executing. Used to identify when all WET plugins and polyfills have finished loading and executing. 
$( document ).on( "wb-ready.wb", function( event ) {
});
Date modified: