Sommaire

La pagination

Insérer un système de pagination est très commun dans les sites web et notamment dans les pages d’accueil. Cela permet aux visiteurs de savoir combien de pages ils ont à leur disposition.

Le système de pagination est inséré dans un élément <ul> ayant la classe .pagination.

Chaque numéro de page est inséré dans un élément <li>. Le <li> du numéro de la page active possède la classe spécifique .active. Pour indiquer par trois points qu’il existe d’autres page, l’élément <li> concerné utilise la classe ellipsis.

Pour afficher le libellé Précédent désactivé, le <li> concerné utilise les classes pagination-previous disabled.

Pour afficher le libellé Suivant actif, le <li> concerné utilise la classe pagination-next.

Voici le code de ce système de pagination :

<ul class="pagination" role="navigation" aria-label="Pagination"> 
  <li class="pagination-previous disabled">Précédent <span 
class="show-for-sr">page</span></li> 
  <li class="current"><span class="show-for-sr">Vous êtes sur  
la page</span> 1</li> 
  <li><a href="#" aria-label="Page 2">2</a></li> 
  <li><a href="#" ...