Les applications Web gèrent de grandes quantités de données. Par exemple, les applications de commerce électronique affichent des milliards de données d'une manière à la fois organisée et visuellement attrayante. Essentiellement, les données doivent être présentées d'une manière facile à comprendre et à parcourir pour les utilisateurs.

Cependant, le rendu de toutes les données sur une seule page peut entraîner des problèmes de performances, des temps de chargement plus lents et une mauvaise expérience utilisateur. Pour cette raison, la mise en œuvre d'une logique de pagination peut considérablement atténuer ces problèmes.

Dans React, vous pouvez choisir d'utiliser des composants prédéfinis fournis par les bibliothèques de pagination. Vous pouvez également créer un système de pagination personnalisé à l'aide de hooks React.

Implémentation de la pagination côté client

Il existe deux manières d'implémenter la pagination dans les applications: la pagination côté client et la pagination côté serveur. Néanmoins, quel que soit le format que vous choisissez, le concept sous-jacent reste le même. La pagination côté client implique la gestion de la logique de pagination côté client, dans le navigateur de l'utilisateur.

Vous pouvez implémenter la pagination côté client à l'aide de diverses techniques. Ces techniques comprennent :

1. Pagination basée sur la page: cette méthode consiste à diviser les données en blocs ou pages de taille fixe, affichant généralement un certain nombre d'éléments par page. Les utilisateurs peuvent parcourir les pages à l'aide de liens ou de boutons de navigation, étiquetés avec des numéros de page ou des boutons précédent et suivant. Il s'agit d'une implémentation populaire auprès des moteurs de recherche et des applications de commerce électronique.
2. Défilé interminable: Cette méthode implique le chargement et le rendu dynamiques de nouvelles données lorsque l'utilisateur fait défiler la page, créant une expérience de navigation transparente et continue. Cette technique est particulièrement utile lorsqu'il s'agit de grands ensembles de données en constante expansion, tels que les flux de médias sociaux.

Implémentation de la pagination basée sur les pages à l'aide de React Hooks

Pour commencer, créez un projet React. Vous pouvez soit utiliser le Commande JavaScript create-react-app pour configurer une application React de baselocalement ou utiliser Vite pour échafauder un projet React sur votre appareil.

Ce tutoriel a utilisé Vite, vous pouvez trouver le code de ce projet dans ce Référentiel GitHub.

Après avoir configuré votre projet React, procédons à la mise en œuvre de la pagination basée sur les pages utiliser React Hooks.

Configuration du jeu de données

Idéalement, vous récupérez et affichez généralement les données d'une base de données. Cependant, pour ce didacticiel, vous allez récupérer les données d'un mannequin API JSONPlaceholder plutôt.

Dans le src répertoire, créez un nouveau composants/pagination fichier et ajoutez le code suivant.

1. Créez un composant fonctionnel React et définissez les états suivants.

   importer Réagir, { useEffect, useState } depuis"réagir";
   importer"./style.composant.css";
   fonctionPagination() {
   constante [données, setData] = useState([]);
   constante [pageactuelle, setPageactuelle] = useState(1);
   constante [itemsParPage, setitemsPerPage] = useState(5);
   constante [pageNumberLimit, setpageNumberLimit] = useState(5);
   constante [maxPageNumberLimit, setmaxPageNumberLimit] = useState(5);
   constante [minPageNumberLimit, setminPageNumberLimit] = useState(0);
   retour (
    <>
   
    Composant de pagination</h1> 
   >
   
    </>
    );
   }
   exporterdéfaut Pagination;

2. Implémentez la logique pour récupérer les données de l'API factice. À l'intérieur de Pagination composant, ajoutez le ci-dessous.

    useEffet(() => {
    aller chercher(" https://jsonplaceholder.typicode.com/todos")
    .alors((réponse) => réponse.json())
    .alors((json) => setData (json));
    }, []);
   constante afficherDonnées = (données) => {
   retour (
   
   
    {data.length > 0 &&
    data.map((todo, index) => {
   retour<liclé={indice}>{todo.title}li>;
    })}
    </ul>
    );
    };
   

   Le code ci-dessus a deux objectifs principaux. Tout d'abord, une fois le composant monté, le utiliserEffet déclencheurs de crochet pour récupérer les données du point de terminaison de l'API externe qui sont ensuite converties au format JSON. Les données JSON résultantes sont ensuite utilisées pour mettre à jour le données variable d'état avec les données de tâches récupérées. Deuxièmement, le afficherDonnées La fonction prendra les données récupérées comme argument et restituera les données sous la forme d'une liste non ordonnée de tâches.
3. Dans le segment de retour du Pagination composant, inclure le afficherDonnées fonction pour rendre les données récupérées dans le navigateur. Voici une version mise à jour du code :

   retour (
    <>
    Composant de pagination</h1> 
   >
    {displayData (données)}
    </>
   );
   

   En appelant displayData (données) dans l'élément JSX et en passant le données variable d'état en tant que paramètre, la fonction affichera alors les données récupérées sous la forme d'une liste non ordonnée dans le navigateur.

Dans ce cas particulier, la liste rendue se compose de deux cents tâches. Cependant, dans des scénarios réels, les applications géreront de grandes quantités de données. L'affichage de toutes ces données sur une seule page Web peut entraîner des problèmes de performances, tels que des temps de chargement lents et des performances globales médiocres des applications.

Pour résoudre ce problème, il conviendrait d'incorporer une fonctionnalité de pagination pour s'assurer que chaque page contient un nombre limité d'éléments auxquels les utilisateurs peuvent accéder séparément en utilisant les boutons de navigation.

Cette approche permet aux utilisateurs de naviguer dans les données de manière plus gérable et organisée, améliorant ainsi les performances globales et l'expérience utilisateur de l'application.

Implémentation d'une logique de pagination pour afficher un nombre limité d'éléments par page

Pour déterminer quelles tâches seront affichées sur chaque page, nous devons implémenter la logique nécessaire. Cependant, avant de continuer, il est essentiel de déterminer le nombre total de pages requises en fonction des tâches disponibles.

Pour ce faire, vous pouvez ajouter le code suivant au Pagination composant:

constante page=[] ;
pour (laisser je = 1; je <= Mathématiques.ceil (data.length / itemsPerPage); je++) {
 pages.push (i);
 }

L'extrait de code ci-dessus parcourt le données tableau, en calculant le nombre total de pages nécessaires en divisant la longueur du données tableau par le nombre souhaité d'éléments par page - le nombre initial d'éléments par page est défini sur cinq dans le objets par page État.

Néanmoins, vous pouvez mettre à jour ce numéro si nécessaire pour tester la logique. Enfin, chaque numéro de page est ensuite ajouté au pages déployer. Maintenant, implémentons la logique d'affichage d'un certain nombre d'éléments par page.

constante indexOfLastItem = pageactuelle * élémentsParPage ;
constante indexOfFirstItem = indexOfLastItem - élémentsParPage ;
constante pageItems = data.slice (indexOfFirstItem, indexOfLastItem);

Ce code détermine les tâches à afficher sur la page du navigateur en fonction de page actuelle et objets par page variables - il extrait les index correspondants pour l'ensemble de tâches à partir du tableau de données à l'aide de la méthode slice. Les index sont ensuite utilisés pour récupérer les tâches spécifiques qui appartiennent à la page souhaitée.

Maintenant, pour afficher les tâches, mettez à jour le afficherDonnées fonction en passant le éléments de page comme paramètre. Voici une version mise à jour du code :

retour (
 <>
 Composant de pagination</h1> 
>
 {displayData (éléments de page)}
 </>
);

En faisant cette mise à jour, le afficherDonnées affichera un nombre limité d'éléments à faire de manière appropriée, reflétant la page actuelle.

Rationalisation de l'accès aux pages et de la navigation avec les boutons de navigation

Pour garantir que les utilisateurs naviguent et accèdent facilement au contenu sur différentes pages, vous devez ajouter des boutons précédent et suivant, ainsi que des boutons qui spécifient les numéros de page spécifiques.

Tout d'abord, implémentons la logique des boutons de numéro de page. Dans le Pagination composant, ajoutez le code ci-dessous.

constante poignéeClic = (événement) => {
 setPageCourante(Nombre(événement.target.id));
 };
constante renderPageNumbers = pages.map((nombre) => {
si (nombre < maxPageNumberLimit +1 && nombre > minPageNumberLimit) {
retour (
 clé={nombre}
 id={nombre}
 onClick={handleClick}
 className={currentPage == nombre? "actif": nul}
 >
 {nombre}
 </li>
 );
 } autre {
retournul;
 }
 });

Le poignéeCliquez La fonction se déclenche lorsqu'un utilisateur clique sur un bouton de numéro de page. Cette action met alors à jour le page actuelle variable d'état avec le numéro de page sélectionné.

Le renderPageNumbers variable utilise la carte méthode pour itérer sur pages array et génère dynamiquement des éléments de liste représentant chaque numéro de page. Il applique une logique conditionnelle pour déterminer les numéros de page à afficher en fonction des limites maximales et minimales définies pour les numéros de page.

Enfin, ajoutez le code pour les boutons suivant et précédent.

constante handleNextbtn = () => {
 setPageCourante (PageCourante + 1);
si (pageactuelle + 1 > maxPageNumberLimit) {
 setmaxPageNumberLimit (maxPageNumberLimit + pageNumberLimit);
 setminPageNumberLimit (minPageNumberLimit + pageNumberLimit);
 }
 };
constante handlePrevbtn = () => {
 setPageCourante (PageCourante - 1);
si ((page actuelle - 1) % limiteNuméropage == 0) {
 setmaxPageNumberLimit (maxPageNumberLimit - pageNumberLimit);
 setminPageNumberLimit (minPageNumberLimit - pageNumberLimit);
 }
 };

Pour afficher les boutons de navigation, mettez à jour les éléments JSX comme suit :

retour (
 <>
 Composant de pagination</h1> 
>
 {displayData (éléments de page)}
"Numéros de page">




 onClick={handlePrevbtn}
 désactivé={PageActuelle == pages[0]? vrai: FAUX}
 > Précédent
 </button>
 </li>

 {renderPageNumbers}


 onClick={handleNextbtn}
 disabled={currentPage == pages[pages.length - 1]? vrai: FAUX}
 > Suivant
 </button>
 </li>
 </ul>
 </>
 );

Une fois le composant rendu, il affichera les numéros de page, les boutons précédent et suivant, et les éléments de données correspondants pour la page actuelle.

Choisir entre les bibliothèques de pagination et les systèmes de pagination personnalisés

Lorsqu'il s'agit de décider entre l'utilisation de bibliothèques de pagination ou la création d'un système de pagination personnalisé, le choix dépend de divers facteurs. Les bibliothèques de pagination, telles que react-paginate, fournissent des composants et des fonctionnalités prédéfinis, permettant une mise en œuvre rapide et simple.

D'autre part, la construction d'un système de pagination personnalisé à l'aide de crochets React offre plus de flexibilité et de contrôle sur la logique de pagination et l'interface utilisateur. La décision dépendra en fin de compte de vos besoins et préférences spécifiques.