Pagination en Javascript Vanille

Introduction

Lors de la création d'un site Web ou d'une application Web, surtout s'ils comportent beaucoup de modélisé contenu (comme une grille ou une liste d'éléments appartenant à une catégorie) - il est généralement préférable de le diviser en pages pour réduire le nombre d'éléments qui s'affichent simultanément à l'écran.

Dans cet article, nous apprendrons comment implémenter la pagination dans nos projets Web en utilisant du JavaScript vanille à partir de zéro.

Pour les besoins de cet article, nous allons récupérer le contenu de this exemple de réponse API. Il contient 100 points de données, mais nous n'en utiliserons que 30 et n'afficherons que 6 messages sur notre écran à la fois.

Pour commencer

Avant de récupérer tous les messages requis à partir de l'API à l'aide de l'API Fetch intégrée aux navigateurs, nous devons d'abord créer un balisage HTML de base qui sera rempli dynamiquement via notre script ultérieurement :

<div class="container"> <div class="title-section"> <h1 class="title">Posts</h1> </div> <div class="posts-section"></div> <div class="pagination-section"> <ul class="pagination"> <li class="page-item prev"><a class="page-link" href="#">Previous</a></li> <li class="page-item next"><a class="page-link" href="#">Next</a></li> </ul> </div>
</div>

Récupération des publications de l'API REST

Comme mentionné précédemment, la pagination consiste à diviser le contenu en plus petits morceaux. Cela vous oblige à récupérer les données, à décider quand et comment les diviser, à calculer le nombre de pages, puis à en montrer une partie à l'utilisateur. Heureusement, la fonctionnalité back-end s'occupe généralement des premières tâches et renvoie la page pertinente, le nombre total de pages et le contenu. par page.

Commençons par récupérer d'abord tous nos messages, puis nous modifierons cela plus tard pour n'interroger que quelques points de données par page :

const postsSection = document.querySelector(".posts-section"); const fetchPosts = async () => { const response = await fetch( "https://jsonplaceholder.typicode.com/posts" ); const posts = await response.json(); postsSection.innerHTML = ""; posts.forEach((post) => { postsSection.innerHTML += ` <div class="posts-card"> <div class="post-title"> <h2 class="post-title-text">${post.title}</h2> </div> <div class="post-body"> <p class="post-body-text"> ${post.body} </p> </div> </div> `; });
}; fetchPosts();

Examinons rapidement le code ci-dessus. Tout d'abord, nous avons commencé par obtenir le div élément où nous afficherions tout notre contenu via le class nom que nous avons attribué au div. Enfin, nous avons écrit une fonction pour gérer l'opération de récupération.

Dans le fetchPosts() fonction, nous avons utilisé la Fetch API pour récupérer les messages de la API de messages d'espace réservé JSON, puis stockez les données JSON référencées par le posts variable et utilisé la innerHTML propriété pour ajouter chaque élément de contenu à la posts-section en les parcourant en boucle.

À ce stade, nous avons réussi à récupérer tout notre contenu.

Commençons par déclarer trois variables essentielles à la mise en œuvre de la pagination dans notre page Web. Le premier est le nombre de messages que nous voulons déclarer par page, puis le numéro de page actuel (1 par défaut), et le nombre total de pages.

Pour ce guide, nous donnerons les nombre total de pages un nombre fixe de 30:

const numberPerPage = 6;
var pageNumber = 1;
var numberOfPages = 30;

Dans la section précédente, nous avons affiché tous les messages sur une seule page, mais nous souhaitons n'en afficher que six à la fois. Par conséquent, nous avons défini le numberPerPage à 6 que nous allons maintenant utiliser pour ajuster l'opération de récupération afin qu'elle n'affiche que 6 messages.

Cela dépend de l'implémentation spécifique, mais il est courant d'autoriser l'utilisation de paramètres de requête lors de la récupération de résultats à partir d'API, ce qui vous permet de récupérer un certain page des résultats. Par exemple, la simulation de l'API REST que nous utilisons permet la page et les limit paramètres qui vous permettent de charger uniquement les lots que vous afficherez à un moment donné.

De cette façon, nous ne chargeons que les données que nous voulons montrer à l'utilisateur ! Nous pouvons alors soit pré-récupérer la page suivante pour un temps de chargement plus rapide, soit profiter de l'accélération de calcul obtenue en ne chargeant que les données à afficher.

Nous utiliserons ces paramètres en modifiant notre requête de récupération :

const fetchPosts = async (pageNumber) => { const response = await fetch( `https://jsonplaceholder.typicode.com/posts?_page=${pageNumber}&_limit=${numberPerPage}` ); const posts = await response.json(); postsSection.innerHTML = ""; posts.forEach((post) => { postsSection.innerHTML += ` <div class="posts-card"> <div class="post-title"> <h2 class="post-title-text">${post.title}</h2> </div> <div class="post-body"> <p class="post-body-text"> ${post.body} </p> </div> </div> `; });
}; fetchPosts();

Dans le code ci-dessus, nous avons ajouté les deux paramètres au point de terminaison de l'API qui sont les pageNumber et les terres parsemées de nombre de messages par page ce qui nous aiderait à diviser nos messages en plusieurs pages, puis ces messages peuvent maintenant être affichés en fonction du numéro de page.

De plus, nous sommes également passés dans le pageNumber à la fetchPosts() fonction afin que nous puissions appeler cette fonction chaque fois que la page change :

Ajoutons maintenant des fonctionnalités aux boutons de navigation de page en bas de notre page et faisons en sorte qu'ils affichent le contenu approprié en fonction du numéro de page.

On remarquera que dans le balisage nous avions une section qui montrait les boutons de pagination :

<div class="pagination-section"> <ul class="pagination"> <li class="page-item prev"><a class="page-link" href="#">Previous</a></li> <li class="page-item next"><a class="page-link" href="#">Next</a></li> </ul>
</div>

Nous allons maintenant ajouter click événements à chaque bouton afin que lorsqu'ils sont cliqués, le contenu destiné à cette page s'affiche.

Mettre en œuvre le Précédent Bouton

La logique ici est assez simple. Il suffit de récupérer l'élément représentant le bouton précédent, ajouter le click écouteur d'événements et affiche le contenu approprié lorsque le bouton est cliqué :

const prev = document.querySelector('.prev');
prev.addEventListener('click', (e) => { e.preventDefault(); if (pageNumber > 1) { pageNumber--; fetchPosts(pageNumber); }
});

Après avoir ajouté un click écouteur d'événements, nous avons vérifié si le numéro de page actuel est supérieur à 1 dans la fonction de rappel. Si le nombre est égal ou inférieur à 1, nous continuerons d'afficher le contenu actuel. Mais si le numéro de page actuel est supérieur à 1 nous pouvons librement décrémenter sa valeur et appeler le fetchPosts(pageNumber) fonction avec le nouveau numéro de page passé en argument, affichant ainsi le contenu de la page précédente.

Mettre en œuvre le Suivant Bouton

La logique ici est complètement la même que pour le précédent bouton, avec seulement quelques modifications mineures. Bien sûr, nous allons récupérer l'élément list avec la classe next au lieu de prev. De plus, nous vérifierons si le numéro de page actuel est inférieur au nombre de pages que nous avons mis à 30 manuellement plus tôt. Au final, nous allons incrémenter le numéro de page actuel au lieu de le décrémenter :

const next = document.querySelector(".next");
next.addEventListener("click", (e) => { e.preventDefault(); if (pageNumber < numberOfPages) { pageNumber++; fetchPosts(pageNumber); }
});

Conclusion

Le fractionnement du contenu en morceaux plus petits et plus gérables qui sont affichés individuellement est crucial chaque fois que vous essayez d'afficher une base de données ou toute autre source de données sur votre application Web.

Dans cet article, nous avons examiné comment implémenter la pagination avec JavaScript à partir de zéro, sans aucune bibliothèque ni outil externe.

• Contenu propulsé par le référencement et distribution de relations publiques. Soyez amplifié aujourd'hui.
• Platoblockchain. Intelligence métaverse Web3. Connaissance Amplifiée. Accéder ici.
• La source: https://stackabuse.com/pagination-in-vanilla-javascript/