Pagination

Utilisez la pagination lorsqu’une liste ou une table est trop longue pour être parcourue confortablement en une seule page. Le contrôle se place par défaut après la liste. Ajoutez un contrôle compact au-dessus lorsque le jeu de données est assez grand pour éviter un retour inutile au bas de la page.

Quand l’utiliser#

• Utilisez environ 12 lignes par page pour les listes éditoriales standards; augmentez cette taille seulement lorsque les lignes sont très compactes ou que la page est avant tout une table de référence dense
• Placez le contrôle après la liste par défaut; ajoutez la variante compacte au-dessus avec retenue — elle est actuellement réservée aux très longs index de liens, où remonter au pied de page coûte trop cher
• Ne combinez pas la pagination Hugo et la pagination de table côté client pour le même jeu de données — choisissez un seul responsable pour la page visible : la pagination Hugo pour les index de sections où chaque résultat est sa propre page et où le navigateur devrait charger une nouvelle URL pour chaque page de résultats, la pagination de table côté client pour une table de données où les filtres, le tri et les lignes visibles agissent sur le même jeu de données déjà chargé
• Une page peut contenir les deux modèles seulement s’ils contrôlent des jeux de données différents — un index d’articles peut utiliser la pagination Hugo pendant qu’une table sans rapport sur la même page utilise la pagination de table côté client; évitez d’imbriquer l’un dans l’autre
• Les références de consultation groupées — codes de compagnies aériennes, codes de pays, indicatifs téléphoniques internationaux — devraient habituellement éviter la pagination classique, parce qu’un index d’ancrage sur des sections groupées est meilleur pour la consultation

Implémentation#

{{ partial "pagination.html" (dict "paginator" $paginator) }}

{{ partial "pagination.html" (dict "paginator" $paginator "variant" "compact") }}

<nav class="pagination pagination-footer" aria-label="Pagination">
  <p class="pagination-summary">Affichage de 1 à 12 sur 34 résultats</p>
  <ol class="pagination-pages">
    <li><span class="pagination-button pagination-button-icon pagination-button-disabled" aria-hidden="true">‹</span></li>
    <li><span class="pagination-button pagination-button-current" aria-current="page">1</span></li>
    <li><a class="pagination-button" href="#" aria-label="Aller à la page 2">2</a></li>
    <li><a class="pagination-button pagination-button-icon" href="#" aria-label="Suivant">›</a></li>
  </ol>
</nav>

<section data-table-list data-page-size="10">
  <!-- rangée de filtres et table -->
  {{ partial "data-page/table-pagination.html" (dict) }}
</section>

Le partiel Hugo est layouts/partials/pagination.html. Il ne rend rien lorsque l’objet de pagination n’a qu’une seule page, calcule la plage visible et les totaux à partir de l’objet de pagination, et fenêtre les numéros de page — au-delà de sept pages, il garde la première, la dernière et la page courante avec ses voisines, en insérant des ellipses entre elles. Les libellés viennent de i18n; le style vient des classes pagination-* dans assets/css/site.css.

Options#

Celles-ci appartiennent à pagination.html :

data-page/table-pagination.html prend plutôt deux surcharges optionnelles :

Variantes#

La variante footer inclut la plage visible, le nombre total de résultats, les contrôles précédent/suivant, les numéros de page et les ellipses. La variante compact inclut seulement les contrôles de page et devrait être alignée à droite; utilisez-la avec retenue comme contrôle du haut au-dessus des très longs index de liens.

Accessibilité#

• Les deux contrôles sont des repères <nav> étiquetés : le partiel et le contrôle côté client de la mise en page des publications tirent leur nom de la clé i18n pagination
• Le partiel rend une seule <ol> de <li>; la page courante est un <span> avec aria-current="page", les liens de page portent un aria-label (« Aller à la page N »), et les liens-icônes ‹ › sont nommés par les clés i18n previous et next
• Les flèches désactivées et les ellipses sont rendues comme <span aria-hidden="true">, si bien que les lecteurs d’écran n’entendent que de vraies destinations
• La pagination Hugo est faite de liens ordinaires — Tab puis Entrée; le contrôle côté client utilise de vrais boutons que initTableLists désactive à chaque extrémité
• L’état de page côté client porte aria-live="polite" et aria-atomic="true", pour que les lecteurs d’écran entendent la nouvelle position de page quand Précédent ou Suivant change les lignes visibles
• Évitez de signaler la page courante par le seul surlignage — aria-current="page" est le signal que reçoivent les lecteurs non visuels; conservez-le si vous réutilisez les classes à la main

Pagination Hugo :

• Index du blogue : pagination de pied, 12 lignes par page
• Index AJA : pagination de pied, 12 lignes par page
• Index des liens : pagination compacte en haut et pagination de pied, 12 lignes par page
• Index des livres : pagination de pied, 12 lignes par page

Pagination de table côté client :

• Table des publications : filtres, tri et pagination des lignes. Elle devrait rester côté client pendant que la liste grandit, parce que les lecteurs filtrent et trient un seul jeu de données plutôt que de naviguer une archive de contenu.

Liste de surveillance#

Ces pages pourraient nécessiter de la pagination ou un filtrage plus fort en grandissant :

• Publications : devrait atteindre environ 60 lignes bientôt; garder la pagination de table côté client
• Index des séries du blogue : pourrait éventuellement nécessiter une pagination de table ou une pagination Hugo si le nombre de séries augmente
• Pages d’index des séries individuelles : pourraient nécessiter une pagination de table si une série devient longue
• Citations : gros jeu de données de référence; nécessite du filtrage ou de la pagination si la navigation devient lourde
• Remerciements : jeu de données de référence de taille moyenne; à revoir s’il continue de grandir