Paginer

Questions ou commentaires?

Fonctionnalité instable

À utiliser à vos risques et périls. Cette fonctionnalité décrite ci-dessous peut être supprimée dans toute version mineure/majeure ultérieure

Apprenez-en plus sur la décision de conception concernant les fonctionnalités provisoires (anglais seulement).

Jetez un coup d'oeil aux autres fonctionnalités provisoires disponibles.

Objectif

Ajoute une pagination au bas d'une liste d'éléments.

Utiliser quand

Vous souhaitez diviser en plusieurs pages une longue liste d'éléments.

Exemple fonctionnel

Exemple français

Exemple en anglais

Comment mettre en œuvre

  1. Ajoutez les classes CSS wb-paginate et provisional à un élément ou un groupe d'éléments à paginer.

    Si défini sur un <table>
    À moins d'être spécifié autrement, il sélectionnera toutes les lignes (<tr>).
    Si défini sur un <ul>
    À moins d'être spécifié autrement, il sélectionnera tous les <li>
    Si défini sur tout autre élément, tel que <section>, <article> ou <div>
    À moins d'être spécifié autrement, il sélectionnera tous les enfants directs de l'élément.
  2. Pour éviter un scintillement au chargement de la page, vous pouvez ajouter la classe CSS wb-pgfltr-out à tous vos éléments.
  3. Testez la fonctionnalité pour voir si elle est correctement configurée et affiche correctement la pagination.
  4. Si vous avez une structure HTML complexe ou si vous avez besoin d'un résultat différent, consultez les options de configuration ci-dessous et faites vos propres ajustements.

Options de configuration

Toutes les options de configuration du plugiciel sont contrôlées par l'attribut data-wb-paginate. Ajoutez simplement un objet JSON comme valeur, par exemple :

<div class="wb-paginate provisional" data-wb-paginate='{
	"appendUI": false,
	"itemsPerPage": 12
}'>
Option Description Type Valeur par défaut
appendUI Définit le sélecteur de l'élément qui contiendra la pagination. Si elle n'est pas définie, l'IU sera insérée après la section (si elle est définie) ou après l'élément. Dans le cas d'un <table> ou d'un <ul>, le code sera inséré après l'élément même si la propriété section est définie. Booléen
Pour un élément <table> ou <ul>
false
Pour tout autre élément
true
itemsPerPage Définit le nombre d'éléments visibles par page. Nombre 25
section Définit le sélecteur de l'élément qui regroupera les items. Chaîne de caractère (sélecteur CSS)
Pour un élément <table>
tbody
Pour tout autre élément
non-défini
selector Définit le sélecteur des éléments qui seront masqués ou affichés en fonction de la page. Chaîne de caractère (sélecteur CSS)
Pour un élément <table>
tr
Pour un élément <ul>
li
Pour tout autre élément
> *

Événements

Les événements suivants peuvent être utilisés pour interagir avec le plugiciel.

Événement Déclencheur Ce qu'il fait
wb-init.wb-paginate Déclenché manuellement (par exemple : $( ".wb-paginate" ).trigger( "wb-init.wb-paginate" );). Initialise le plugiciel de pagination et crée l'interface utilisateur (IU). Remarque : le plugiciel de pagination sera initialisé automatiquement à moins que l'élément .wb-paginate ne soit ajouté après le chargement de la page.
wb-ready.wb-paginate Déclenché automatiquement après l'initialisation du plugiciel de pagination. Utilisé pour identifier quand et où le plugiciel de pagination s'initialise (cible de l'événement). 
$( document ).on( "wb-ready.wb-filter", ".wb-filter", function( event ) {
});
$elm.on( "wb-ready.wb-filter", function( event ) {
});
wb-ready.wb Déclenché automatiquement lorsque BOEW a terminé le chargement et l'exécution. Utilisé pour identifier quand tous les plugiciels et polyfills BOEW ont fini de se charger et de s'exécuter. 
$( document ).on( "wb-ready.wb", function( event ) {
});
Date de modification :