Comment implémenter la pagination avec HTML, CSS et JavaScript

Sur le Web, la pagination est un moyen de diviser de gros morceaux de contenu en morceaux plus petits. Dans cet article, nous examinerons un moyen simple de diviser le contenu en une série de « pages » à l’aide de HTML, CSS et JavaScript Vanilla.

Bien que la pagination puisse être implémentée à l’aide de frameworks tels que React et Angular, l’objectif de cet article est de fournir un guide simple, étape par étape, pour configurer la pagination, afin que nous puissions comprendre les concepts de base impliqués.

Création de notre page Web de base

Avant d’implémenter notre système de pagination, créons une structure HTML qui stocke le contenu que nous souhaitons afficher. Il peut s’agir de n’importe quel type de contenu, mais pour ce didacticiel, nous utiliserons un tableau de cinq colonnes et 15 lignes qui stocke les noms des élèves de différentes classes. Voici un extrait de notre code HTML :

<article class="content">
  <table>
    <thead>
      <tr>
        <th>Grade 1</th>
        <th>Grade 2</th>
        <th>Grade 3</th>
        <th>Grade 4</th>
        <th>Grade 5</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Faith Andrew</td>
        <td>Angela Christopher`</td>
        <td>David Elias</td>
        <td>Samuel Thomas</td>
        <td>Richard Elias</td>
      </tr>
      ⋮ 
    </tbody>
  </table>
</article>

Nous avons enveloppé la table dans un élément conteneur (<article class="content">). Même si nous ne le faisons pas strictement besoin un élément conteneur, c’est pratique de l’avoir, surtout s’il y a d’autres éléments sur notre page. (Cela donne un contexte utile pour les boutons de pagination que nous allons ajouter.)

Vous pouvez consulter notre code HTML complet, ainsi que du style, sur CodeStylo.

Une fois nos HTML et CSS en place, la prochaine étape consiste à implémenter la pagination. Nous allons d’abord utiliser JavaScript pour diviser le tableau en différentes « pages » et ajouter une fonctionnalité de bouton pour naviguer dans ces pages.

Création d’une fonction qui divise le tableau en pages

Voici notre code pour diviser le tableau en morceaux séparés :

document.addEventListener('DOMContentLoaded', function () {
  const content = document.querySelector('.content'); 
  const itemsPerPage = 5;
  let currentPage = 0;
  const items = Array.from(content.getElementsByTagName('tr')).slice(1);

La première ligne crée un écouteur d’événements qui garantit que le code JavaScript s’exécute une fois le contenu HTML entièrement chargé et analysé. Il s’agit d’empêcher toute manipulation ou interaction avec des éléments avant que le contenu ne soit disponible dans le DOM.

Avec document.querySelector('.content')nous sélectionnons le <article class="content"> wrapper et en l’initialisant en tant que variable.

Avec const itemsPerPage = 5;nous définissons le nombre de lignes à afficher sur chaque page.

Avec let currentPage = 0;, nous créons une variable qui garde la trace du numéro de page actuel. Il commence à 0, qui représente la première page. (Le premier index en JavaScript est 0, il compte donc à partir de 0 au lieu de 1.)

La dernière ligne utilise le getElementsByTagName méthode pour sélectionner tous les éléments avec un <tr> balise dans le tableau. Nous créons un tableau (items) de tous les éléments enfants et utilisé le slice(1) pour exclure la première ligne (en-tête) et créer un tableau des lignes restantes.

Cela signifie que le titre restera en place lorsque nous changerons de page.

Travailler sur la fonctionnalité showPage()

Travaillons ensuite sur le code d’affichage des pages :

function showPage(page) {
  const startIndex = page * itemsPerPage;
  const endIndex = startIndex + itemsPerPage;
  items.forEach((item, index) => {
    item.classList.toggle('hidden', index < startIndex || index >= endIndex);
  });
  updateActiveButtonStates();
}

Nous commençons par créer un showPage() fonction qui accepte un page paramètre. Cette fonction est chargée d’afficher les éléments connectés à cette page spécifique lorsqu’elle est appelée.

Ensuite, nous calculons le startIndexqui est le premier élément qui doit être affiché sur la page actuelle en multipliant le paramètre page par le itemsPerPage. Nous calculons également le endIndex qui vient immédiatement après le dernier élément qui doit être affiché sur la page en cours.

En faisant cela, nous créons une gamme d’éléments à afficher. Par exemple, disons que nous avons dix éléments et que nous souhaitons en afficher cinq par page. Si nous sommes sur la première page (page = 0), startIndex sera 0, et endIndex sera 0 + 5 = 5. Cette plage ([0, 5]) comprend les cinq premiers éléments. Sur la page suivante (page = 1), startIndex sera 5, et endIndex sera 5 + 5 = 10. Cette plage ([5, 10]) inclut les éléments restants.

Avec items.forEach()nous créons une boucle qui parcourt chaque ligne et vérifie si son index se situe dans la plage d’éléments à afficher sur la page actuelle, c’est-à-dire s’il se trouve avant le startIndex ou après/égal au endIndex. Si l’indice est dans la plage, le toggle le mot-clé applique le hidden classe (que nous définirons dans notre code CSS) à l’élément, le cachant ainsi. Si l’index ne remplit aucune des deux conditions, le hidden La classe est supprimée, rendant l’élément visible.

Notre hidden class déplace les éléments hors de l’écran, les cachant à la vue tout en les permettant d’être accessibles à ceux qui utilisent des lecteurs d’écran :

.hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

Ajout de boutons

Voyons maintenant comment ajouter nos boutons de navigation. Dans le code ci-dessous, nous allons créer et ajouter la fonctionnalité du bouton en fonction du contenu du tableau :

function createPageButtons() {
  const totalPages = Math.ceil(items.length / itemsPerPage);
  const paginationContainer = document.createElement('div');
  const paginationDiv = document.body.appendChild(paginationContainer);
  paginationContainer.classList.add('pagination');

Dans un premier temps, nous créons un createPageButtons() fonction qui stockera la logique pour créer nos boutons. Ensuite, nous calculons le nombre total de pages dont nous aurons besoin pour afficher notre tableau. Pour ce faire, nous divisons le nombre total d’éléments par le nombre d’éléments souhaité par page. Le résultat est arrondi à l’aide du Math.ceil() fonction. Cela garantit que toutes les lignes de nos éléments de tableau sont couvertes par les pages disponibles.

Ensuite, nous créons un div pour contenir nos boutons de page générés dynamiquement (document.createElement('div')). Ensuite, nous avons ajouté le <div> élément au corps de notre structure HTML en utilisant document.body.appendChild(paginationDiv). (Oui, nous ne lui avons pas réellement indiqué où se situer dans la structure HTML. Nous le ferons sous peu.) Enfin, nous ajoutons une classe de pagination à ce conteneur de boutons afin que nous puissions le cibler avec des styles.

L’étape suivante consiste à créer des boutons pour chaque page, en utilisant une boucle pour parcourir chaque index de page possible :

for (let i = 0; i < totalPages; i++) {
const pageButton = document.createElement('button');
pageButton.textContent = i + 1;
pageButton.addEventListener('click', () => {
  currentPage = i;
  showPage(currentPage);
  updateActiveButtonStates();
});

Le for la boucle va de 0 (qui est la première page) au nombre total de pages moins 1.

Au sein de chaque itération de page, un nouveau bouton de page individuel est créé à l’aide du document.createElement() méthode, augmentant le numéro de page de 1 à chaque boucle.

Ensuite, nous créons un écouteur d’événement de clic et l’attachons aux boutons de la page. Lorsqu’un bouton est cliqué, la fonction de rappel de l’écouteur d’événement est exécutée.

Voici une explication de la fonction de rappel :

• Le currentPage La variable est mise à jour à la valeur actuelle de iqui correspond à l’index de la page cliquée.
• Le showPage() la fonction est appelée avec la mise à jour currentPage valeur, provoquant l’affichage du contenu de la page cliquée.

Pour terminer notre code de création de bouton, nous terminons par ceci :

content.appendChild(paginationContainer);
paginationDiv.appendChild(pageButton);

Nous ajoutons notre conteneur de boutons à la fin de notre .content wrapper, puis placez nos boutons à l’intérieur du conteneur de boutons.

Mise en surbrillance des boutons actifs

Pour rendre nos boutons plus conviviaux, nous ajouterons un style distinctif au bouton actuellement « actif ». Créons une fonction qui applique les styles du active Classe CSS à un bouton une fois sa page active :

function updateActiveButtonStates() {
  const pageButtons = document.querySelectorAll('.pagination button');
  pageButtons.forEach((button, index) => {
    if (index === currentPage) {
      button.classList.add('active');
    } else {
      button.classList.remove('active');
    }
  });
}

Tout d’abord, nous récupérons tous les boutons de pagination à l’aide du document.querySelectorAll et les affecter au pageButtons variable.

Le updateActiveButtonStates() La fonction parcourt ensuite chacun de ces boutons un par un, à l’aide d’un forEach boucle, et compare son index avec la valeur du currentPage variable.

Ensuite, nous utilisons le conditionnel if instruction pour attribuer les styles du active classe si l’index du bouton correspond à la page actuelle.

Si l’index du bouton ne correspond pas à la page actuelle, le active la classe est supprimée. Cela garantit que les autres boutons ne conservent pas le active classe.

Pour implémenter cette fonctionnalité, nous appelons le updateActiveButtonStates() fonction chaque fois qu’une page est modifiée ou affichée.

Faire appel au script

Notre script de pagination se termine par les deux lignes suivantes :

createPageButtons();
showPage(currentPage);

Nous appelons le createPageButtons() fonctionner avant le showPage() fonction. Cela garantit que les boutons sont créés une fois la page chargée.

Notre script calcule désormais la plage appropriée d’éléments à afficher pour chaque page, écoute les clics sur les boutons et met à jour l’affichage de la page.

Le résultat final

Le stylo suivant montre le résultat final.

Adapter notre code à d’autres scénarios

Le script que nous avons créé est pratique pour diviser un tableau en une série de pages. Mais que se passe-t-il si notre contenu est autre chose qu’un tableau ? Au lieu du contenu du tableau, essayons notre script avec d’autres types de contenu.

Au lieu d’un élément table, plaçons quelques <section> éléments à l’intérieur de notre conteneur et voyez comment adapter notre script. Voici notre code HTML de base :

<article class="content">
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
</article>

Il nous suffit d’apporter trois modifications très simples à notre script :

document.addEventListener('DOMContentLoaded', function () {
const content = document.querySelector('.content'); 
const itemsPerPage = 1;
let currentPage = 0;
const items = Array.from(content.getElementsByTagName('section')).slice(0);

Les changements sont :

• ensemble itemsPerPage à 1, afin qu’une seule section apparaisse par page
• changez le nom de la balise ciblée en sectionalors que nous parcourons maintenant <section> éléments plutôt que <tr> éléments
• ensemble slice() à 0, ce qui limite la sélection au premier élément de la section (qui a l’indice 0)

La démo CodePen suivante montre cela en action.

Nous pouvons facilement adapter la démo ci-dessus pour travailler avec une liste d’éléments. Dans l’exemple ci-dessous, nous changeons l’élément d’emballage d’un <article> à un <ul>et changez le <section> éléments à <li> éléments:

<ul class="content">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

Dans notre JavaScript, nous allons simplement apporter deux modifications :

• getElementsByTagName('section') devient getElementsByTagName('li')
• fixons const itemsPerPage à 2 pour afficher deux éléments de liste par page

Après quelques modifications CSS mineures pour tenir compte de la liste non ordonnée, nous nous retrouvons avec le résultat ci-dessous.

Conclusion

Dans ce didacticiel, nous avons appris à implémenter la pagination en utilisant HTML, CSS et JavaScript. Pour ceux qui n’ont pas activé JavaScript (pour quelque raison que ce soit), le contenu complet est toujours disponible, mais sans pagination. En utilisant la sémantique <button> éléments, la page est toujours accessible au clavier. Nous avons également masqué notre contenu non actif en le déplaçant hors de l’écran, plutôt que d’utiliser display: noneafin qu’il soit toujours accessible aux lecteurs d’écran.

Nous pourrions aller plus loin en ajoutant des étiquettes et des attributs ARIA descriptifs pour transmettre aux lecteurs d’écran le but et le rôle d’éléments tels que les boutons de pagination.

J’espère que cette démo vous fera réfléchir à une fonctionnalité de pagination simple sans avoir besoin de recourir à un framework.