Fonctionnalité de pagination | Développement web front-end | Aperçu du cours

Introduction

Dans ce projet, vous apprendrez à implémenter la fonctionnalité de pagination pour une liste de cours. La pagination est une fonctionnalité essentielle dans le développement web front-end, et ce projet vous guidera tout au long du processus d'extraction de données à partir d'un fichier JSON, de l'affichage des données au format paginé et de la gestion des fonctionnalités des boutons de page précédente et suivante.

👀 Aperçu

Démonstration de la fonctionnalité de pagination

🎯 Tâches

Dans ce projet, vous apprendrez :

Comment extraire des données à partir d'un fichier JSON en utilisant la bibliothèque Axios
Comment afficher les données de cours au format paginé, avec 5 éléments par page
Comment implémenter la fonctionnalité des boutons de page précédente et suivante
Comment désactiver les boutons de page précédente et suivante lorsque cela est approprié (première et dernière page)
Comment mettre à jour l'affichage de la pagination pour afficher le numéro de page actuel et le nombre total de pages

🏆 Réalisations

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

Extraire des données à partir d'un fichier JSON en utilisant Axios
Implémenter la fonctionnalité de pagination pour une liste de cours
Gérer les interactions utilisateur avec les boutons de page précédente et suivante
Désactiver conditionnellement les boutons en fonction de la page actuelle
Mettre à jour l'interface utilisateur pour afficher la page actuelle et le nombre total de pages

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
│   └── bootstrap.css
├── index.html
└── js
    ├── axios.js
    ├── carlist.json
    └── index.js

Dans cette structure :

css/bootstrap.css est le fichier de style Bootstrap utilisé dans le projet.
index.html est la page web principale.
js/carlist.json est le fichier de données nécessaire pour la requête.
js/axios.js est le fichier axios utilisé pour la requête.
js/index.js est le fichier JavaScript à compléter.

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 actualisez-la manuellement, et vous verrez la page. L'effet est le suivant :

Effet initial

Extraire les données à partir du fichier JSON

Dans cette étape, vous apprendrez à extraire des données à partir du fichier carlist.json et à les stocker dans la variable data.

Localisez le fichier js/index.js et trouvez le commentaire // TODO: Requesting data from the carlist.json file.
Utilisez la méthode axios.get() pour extraire les données du fichier ./js/carlist.json.
Une fois les données extraites, stockez-les dans la variable data.
Calculez le nombre maximum de pages en divisant le nombre total d'éléments par le nombre d'éléments par page (5). Stockez cette valeur dans la variable maxPage.
Appelez la fonction showPagination() et passez maxPage et pageNum (qui est défini sur 1 par défaut) en tant qu'arguments pour afficher le numéro de page actuel et le nombre total de pages.
Appelez la fonction getPageData() et passez data en tant qu'argument pour obtenir les données de la première page (éléments 1 - 5). Stockez cela dans la variable pageData.
Appelez la fonction renderHtml() et passez pageData en tant qu'argument pour afficher le HTML de la première page.

Votre code devrait ressembler à ceci :

let data;
let pageData;
// TODO: Requesting data from the carlist.json file
axios.get("./js/carlist.json").then((res) => {
  data = res.data;
  maxPage = Math.ceil(data.length / 5);
  showPagination(maxPage, pageNum);
  pageData = getPageData(data);
  renderHtml(pageData);
});

Implémenter la fonctionnalité de page précédente

Dans cette étape, vous apprendrez à implémenter la fonctionnalité du bouton de page précédente.

Localisez le gestionnaire d'événement de clic pour le bouton de page précédente (prev.onclick).
À l'intérieur du gestionnaire d'événement, commencez par supprimer la classe disabled du bouton de page suivante (next.classList.remove("disabled")).
Décrémentez la variable pageNum de 1 pour passer à la page précédente.
Si pageNum est inférieur ou égal à 1, cela signifie que nous sommes sur la première page. Ajoutez donc la classe disabled au bouton de page précédente (this.classList.add("disabled")) et définissez pageNum sur 1.
Appelez la fonction showPagination() et passez maxPage et pageNum en tant qu'arguments pour mettre à jour l'affichage de la pagination.
Appelez la fonction getPageData() et passez data en tant qu'argument pour obtenir les données de la page actuelle. Stockez cela dans la variable pageData.
Appelez la fonction renderHtml() et passez pageData en tant qu'argument pour afficher le HTML de la page actuelle.

Votre code devrait ressembler à ceci :

// Click on the previous page
let prev = document.getElementById("prev");
prev.onclick = function () {
  // TODO
  next.classList.remove("disabled");
  pageNum--;
  if (pageNum <= 1) {
    this.classList.add("disabled");
    pageNum = 1;
  }
  showPagination(maxPage, pageNum);
  pageData = getPageData(data);
  renderHtml(pageData);
};

Implémenter la fonctionnalité de page suivante

Dans cette étape, vous apprendrez à implémenter la fonctionnalité du bouton de page suivante.

Localisez le gestionnaire d'événement de clic pour le bouton de page suivante (next.onclick).
À l'intérieur du gestionnaire d'événement, commencez par supprimer la classe disabled du bouton de page précédente (prev.classList.remove("disabled")).
Incrémentez la variable pageNum de 1 pour passer à la page suivante.
Si pageNum est supérieur ou égal à maxPage, cela signifie que nous sommes sur la dernière page. Ajoutez donc la classe disabled au bouton de page suivante (this.classList.add("disabled")) et définissez pageNum sur maxPage.
Appelez la fonction showPagination() et passez maxPage et pageNum en tant qu'arguments pour mettre à jour l'affichage de la pagination.
Appelez la fonction getPageData() et passez data en tant qu'argument pour obtenir les données de la page actuelle. Stockez cela dans la variable pageData.
Appelez la fonction renderHtml() et passez pageData en tant qu'argument pour afficher le HTML de la page actuelle.

Votre code devrait ressembler à ceci :

// Click on the next page
let next = document.getElementById("next");
next.onclick = function () {
  // TODO
  prev.classList.remove("disabled");
  pageNum++;
  if (pageNum >= maxPage) {
    this.classList.add("disabled");
    pageNum = maxPage;
  }
  showPagination(maxPage, pageNum);
  pageData = getPageData(data);
  renderHtml(pageData);
};

Maintenant, vous avez terminé l'implémentation de la fonctionnalité de pagination pour la liste de cours. Vous pouvez tester la fonctionnalité en cliquant sur les boutons de page précédente et suivante pour voir les données de cours s'afficher correctement.

Un gif de toutes les fonctions terminées est le suivant :

Effet terminé