Créer un composant de pagination | Tutoriel JavaScript

Introduction

Dans ce projet, vous allez apprendre à construire un composant de pagination, qui est un composant couramment utilisé dans les applications web. Le composant de pagination aide à réduire le temps de requête sur le serveur d'arrière-plan et n'affecte pas les performances du rendu de la page en raison du chargement excessif de données.

👀 Aperçu

Démo du composant de pagination

🎯 Tâches

Dans ce projet, vous allez apprendre :

Comment implémenter la fonction ajax pour gérer les requêtes de données et récupérer les données de la page actuelle et le nombre total de pages.
Comment implémenter la fonction initEvents pour lier des événements aux boutons du composant de pagination.
Comment implémenter la fonction createPaginationIndexArr pour générer un tableau de pagination en fonction des arguments de la fonction.
Comment implémenter la fonction renderPagination pour générer le modèle de chaîne de caractères pour le composant de pagination.
Comment afficher le contenu en fonction de la page actuelle.

🏆 Réalisations

Après avoir terminé ce projet, vous serez capable de :

Construire un composant de pagination réutilisable en JavaScript.
Utiliser Axios pour effectuer des requêtes HTTP et gérer les données de réponse.
Générer un tableau de pagination en fonction de la page actuelle, du nombre total de pages et du nombre maximum de boutons de page à afficher.
Mettre à jour le composant de pagination et le contenu en fonction de la page actuelle.

Configurer la structure du projet

Dans cette étape, vous allez configurer les fichiers et la structure du projet. Suivez les étapes ci-dessous pour terminer cette étape :

Ouvrez le dossier du projet. La structure du répertoire est la suivante :

├── css
│   └── index.css
├── index.html
└── js
    ├── data.json
    ├── axios.min.js
    ├── util.js
    └── index.js

Où :

css/index.css est le fichier de style CSS.
index.html est la page principale.
js/data.json est le fichier JSON qui stocke les données.
js/axios.min.js est le fichier axios.
js/index.js est le fichier à compléter.
js/util.js est le fichier qui stocke les fonctions utiles.

Cliquez sur le bouton Go Live dans le coin inférieur droit de WebIDE pour exécuter le projet.

Ensuite, ouvrez "Web 8080" en haut de la machine virtuelle et rafraîchissez manuellement pour voir la page.

Effet initial

Implémenter la fonction ajax

Dans cette étape, vous allez implémenter la fonction ajax dans le fichier js/index.js pour gérer la requête de données.

Ouvrez le fichier js/index.js.
Localisez la fonction ajax et complétez son implantation.
La fonction ajax devrait récupérer les données de la page actuelle et le nombre total de pages en fonction des arguments de la fonction, et les retourner.
Vous pouvez utiliser la bibliothèque Axios fournie pour effectuer une requête HTTP vers le fichier ./js/data.json.

Voici la fonction ajax complétée :

async function ajax({
  url,
  method = "get",
  data,
  query: { currentPage, pageSize }
}) {
  // TODO: Obtenez les données de la page actuelle selon l'objet `query` du paramètre de fonction `currentPage, pageSize`.
  let result = {
    data: [],
    total: 0
  };

  let resData = [];
  let res = await axios[method](url, data);
  if (res.status === 200) {
    resData = res.data.data;
    result.total = res.data.total;
  }
  result.data = resData.slice(
    (currentPage - 1) * pageSize,
    currentPage * pageSize
  );

  return result;
}

Implémenter la fonction initEvents

Dans cette étape, vous allez implémenter la fonction initEvents dans le fichier js/index.js, qui lie des événements aux boutons du composant de pagination.

Ouvrez le fichier js/index.js.
Localisez la fonction initEvents et complétez son implantation.
Lorsque le bouton "<" est cliqué, la valeur de this.currentPage devrait être réduite de 1, avec une valeur minimale de 1.
Lorsque le bouton ">" est cliqué, la valeur de this.currentPage devrait être augmentée de 1, avec une valeur maximale de this.totalPages.
Lorsque la valeur de this.currentPage change, le composant de pagination sur la page devrait être mis à jour en conséquence.

Voici la fonction initEvents complétée :

initEvents() {
    this.root.querySelector("#btn-prev").addEventListener("click", () => {
      // TODO: Événement de clic pour le bouton "<", this.currentPage - 1 lorsqu'il est cliqué.
      if (this.currentPage > 1) {
        this.currentPage--;
        this.initPagination();
      }
    });
    this.root.querySelector("#btn-next").addEventListener("click", () => {
      // TODO: Événement de clic pour le bouton ">", this.currentPage + 1 lorsqu'il est cliqué.
      if (this.currentPage < this.totalPages) {
        this.currentPage++;
        this.initPagination();
      }
    });
    this.root.querySelector(".pager").addEventListener("click", (e) => {
      if (e.target.nodeName.toLowerCase() === "li") {
        if (this.currentPage === e.target.innerText) return;
        if (e.target.classList.contains("more")) return;
        this.currentPage = Number(e.target.innerText);
      }
      this.initPagination();
    });
  }

Implémenter la fonction createPaginationIndexArr

Dans cette étape, vous allez implémenter la fonction createPaginationIndexArr dans le fichier js/util.js, qui génère un tableau de pagination (indexArr) selon certaines règles à partir des arguments de la fonction.

Ouvrez le fichier js/util.js.
Localisez la fonction createPaginationIndexArr et complétez son implantation.
La fonction devrait générer le tableau de pagination (indexArr) à partir des paramètres passés currentPage, totalPages et pagerCount.
Les règles pour générer le tableau de pagination sont les suivantes :
- Cas particulier : totalPages <= pagerCount
- Cas normal : totalPages > pagerCount
Le indexArr généré devrait suivre les exemples fournis dans la description du défi.

Voici la fonction createPaginationIndexArr complétée :

const createPaginationIndexArr = (currentPage, totalPages, pagerCount) => {
  let indexArr = [];
  // TODO: Générer le tableau de pagination basé sur les paramètres passés indexArr.
  indexArr[0] = 1;
  if (totalPages <= pagerCount) {
    for (let i = 1; i < totalPages; i++) {
      indexArr.push(i + 1);
    }
  } else {
    indexArr[pagerCount - 1] = totalPages;
    if (currentPage <= pagerCount - 2) {
      for (let i = 1; i < pagerCount - 1; i++) {
        indexArr[i] = i + 1;
      }
    } else if (currentPage <= totalPages - pagerCount + 2) {
      let j = 1;
      for (
        let i = -Math.ceil((pagerCount - 3) / 2);
        i <= Math.floor((pagerCount - 3) / 2);
        i++
      ) {
        indexArr[j++] = currentPage + i;
      }
    } else {
      let j = 1;
      for (let i = totalPages - pagerCount + 2; i < totalPages; i++) {
        indexArr[j++] = i;
      }
    }
  }

  return indexArr;
};

Implémenter la fonction renderPagination

Dans cette étape, vous allez implémenter la fonction renderPagination dans le fichier js/index.js, qui génère le modèle de chaîne de caractères template pour le composant de pagination sur la base du tableau indexArr.

Ouvrez le fichier js/index.js.
Localisez la fonction renderPagination et complétez son implantation.
La fonction devrait générer le modèle de chaîne de caractères template pour le composant de pagination sur la base du tableau indexArr, conformément aux règles décrites dans la description du défi.
Le template généré devrait être inséré dans la structure HTML du composant de pagination à l'aide de this.root.innerHTML.

Voici la fonction renderPagination complétée :

renderPagination(indexArr) {
  let template = "";
  // TODO: Génère un modèle de chaîne de caractères template pour le composant de pagination sur la base du tableau indexArr.
  template = indexArr.reduce((prev, next, index) => {
    if (indexArr[index] - indexArr[index - 1] > 1) {
      prev += `<li class="number more">...</li>`;
      prev += `<li class="number ${
        this.currentPage == next? "active" : ""
      }">${next}</li>`;
    } else {
      prev += `<li class="number ${
        this.currentPage == next? "active" : ""
      }">${next}</li>`;
    }
    return prev;
  }, "");

  this.root.innerHTML = `
      <div class="pagination">
          <div class="btn btn-left" id="btn-prev">&lt;</div>
          <ul class="pager">${template} </ul>
          <div class="btn btn-right" id="btn-next">&gt;</div>
      </div>`;
}

Tester le composant de pagination

Dans cette étape, vous allez tester le résultat final du composant de pagination.

Enregistrez les fichiers js/index.js et js/util.js.
Raffraîchissez la page web dans le navigateur.
Vérifiez l'effet de la page.

Félicitations ! Vous avez terminé l'implémentation du Composant de pagination. L'effet final de la page devrait être le suivant :

Image Description

Résumé

Félicitations ! Vous avez terminé ce projet. Vous pouvez pratiquer plus de laboratoires sur LabEx pour améliorer vos compétences.

Création d'un composant de pagination réutilisable