Navigation

Pagination

nouveauClasses hb-pagination hb-pagination-pagesVuetify 2 v-pagination ou le pied de v-data-tableVuetify 3 v-pagination

Quand l'utiliser

Sous un tableau ou une liste de plus de 25 à 50 lignes chargées côté serveur. Pour une liste locale courte, tout afficher ; pour une liste longue locale, le défilement virtuel.

26–50 sur 312

…

Code

<div class="hb-pagination" style="max-width:640px">
  <span>26–50 sur 312</span>
  <div class="hb-select" style="width:120px"><select class="hb-field" aria-label="Lignes par page" style="height:var(--control-sm)"><option>25 lignes</option><option>50 lignes</option><option>100 lignes</option></select></div>
  <div class="hb-pagination-pages">
    <button aria-label="Page précédente"><i class="material-icons">chevron_left</i></button>
    <button>1</button><button aria-current="page">2</button><button>3</button><span>…</span><button>13</button>
    <button aria-label="Page suivante"><i class="material-icons">chevron_right</i></button>
  </div>
</div>

Règles

Au plus cinq numéros visibles plus la première et la dernière, le reste en points de suspension ; la page courante porte aria-current="page".
Les flèches sont disabled en bout, jamais cachées : la barre garde sa largeur.
Le changement de page remonte en haut du tableau et se reflète dans l'URL quand c'est une page de liste.