Comment implémenter la pagination dans une application Vue

La pagination vous permet de diviser de grands ensembles de données en morceaux plus petits et plus faciles à gérer. La pagination permet aux utilisateurs de parcourir plus facilement de grands ensembles de données et de trouver les informations qu’ils recherchent.

Premiers pas avec Vue-Awesome-Paginate

Vue-awesome-paginate est une bibliothèque de pagination Vue puissante et légère qui simplifie le processus de création d’affichages de données paginées. Il fournit des fonctionnalités complètes, notamment des composants personnalisables, des API faciles à utiliser et la prise en charge de divers scénarios de pagination.

Pour commencer à utiliser vue-awesome-paginate, installez le package en exécutant cette commande de terminal dans le répertoire de votre projet :

npm install vue-awesome-paginate

Ensuite, pour configurer le package pour qu’il fonctionne dans votre application Vue, copiez le code ci-dessous dans le fichier src/main.js :

import { createApp } from "vue";import App from "./App.vue";import VueAwesomePaginate from "vue-awesome-paginate";import "vue-awesome-paginate/dist/style.css";createApp(App).use(VueAwesomePaginate).mount("#app");

Ce code importe et enregistre le package avec la méthode .use() afin que vous puissiez l’utiliser n’importe où dans votre application. Le package de pagination est livré avec un fichier CSS, que le bloc de code importe également.

Création de l’application Test Vue

Pour illustrer le fonctionnement du package vue-awesome-paginate, vous allez créer une application Vue qui affiche un exemple d’ensemble de données. Vous récupérerez les données d’une API avec Axios pour cette application.

Copiez le bloc de code ci-dessous dans votre fichier App.vue :

<script setup>import { ref, onBeforeMount } from "vue";import axios from "axios";const comments = ref([]);const loadComments = async () => { try { const response = await axios.get( `https://jsonplaceholder.typicode.com/comments`, ); return response.data.map((comment) => comment.body); } catch (error) { console.error(error); }};onBeforeMount(async () => { const loadedComments = await loadComments(); comments.value.push(...loadedComments); console.log(comments.value);});</script><template> <div> <h1>Vue 3 Pagination with JSONPlaceholder</h1> <div v-if="comments.length"> <div v-for="comment in comments" class="comment"> <p>{{ comment }}</p> </div> </div> <div v-else> <p>Loading comments...</p> </div> </div></template>

Ce bloc de code utilise l’API Vue Composition pour créer un composant. Le composant utilise Axios pour récupérer les commentaires de l’API JSONPlaceholder avant que Vue ne le monte ( hook onBeforeMount ). Il stocke ensuite les commentaires dans le tableau des commentaires , en utilisant le modèle pour les afficher ou un message de chargement jusqu’à ce que les commentaires soient disponibles.

Intégration de Vue-Awesome-Paginate dans votre application Vue

Vous disposez maintenant d’une application Vue simple qui récupère les données d’une API, vous pouvez la modifier pour intégrer le package vue-awesome-paginate. Vous utiliserez cette fonctionnalité de pagination pour diviser les commentaires en différentes pages.

Remplacez la section script de votre fichier App.vue par ce code :

<script setup>import { ref, computed, onBeforeMount } from 'vue';import axios from 'axios';const perPage = ref(10);const currentPage = ref(1);const comments = ref([]);const onClickHandler = (page) => { console.log(page);};const loadComments = async () => { try { const response = await axios.get( `https://jsonplaceholder.typicode.com/comments` ); return response.data.map(comment => comment.body); } catch (error) { console.error(error); }};onBeforeMount(async () => { const loadedComments = await loadComments(); comments.value.push(...loadedComments); console.log(comments.value);});const displayedComments = computed(() => { const startIndex = (currentPage.value * perPage.value) - perPage.value; const endIndex = startIndex + perPage.value; return comments.value.slice(startIndex, endIndex);});</script>

Ce bloc de code ajoute deux références réactives supplémentaires : perPage et currentPage . Ces références stockent respectivement le nombre d’éléments à afficher par page et le numéro de page actuel.

Le code crée également une référence calculée nommée displayComments . Ceci calcule la plage de commentaires en fonction des valeurs currentPage et perPage . Il renvoie une tranche du tableau de commentaires dans cette plage, qui regroupera les commentaires sur différentes pages.

Maintenant, remplacez la section modèle de votre fichier App.vue par ce qui suit :

<template> <div> <h1>Vue 3 Pagination with JSONPlaceholder</h1> <div v-if="comments.length"> <div v-for="comment in displayedComments" class="comment"> <p>{{ comment }}</p> </div> <vue-awesome-paginate : total-items="comments.length" : items-per-page="perPage" : max-pages-shown="5" v-model="currentPage" : onclick="onClickHandler" /> </div> <div v-else> <p>Loading comments...</p> </div> </div></template>

L’attribut v-for pour le rendu des listes dans cette section de modèle pointe vers le tableau displayComments. Le modèle ajoute le composant vue-awesome-paginate, auquel l’extrait ci-dessus transmet les accessoires.

Après avoir stylisé votre application, vous devriez obtenir une page qui ressemble à ceci :

Cliquez sur chaque bouton numéroté et vous verrez un ensemble différent de commentaires.

Utilisez la pagination ou le défilement infini pour une meilleure navigation dans les données

Vous disposez désormais d’une application Vue très basique qui montre comment paginer efficacement les données. Vous pouvez également utiliser le défilement infini pour gérer de longs ensembles de données dans votre application. Assurez-vous de prendre en compte les besoins de votre application avant de choisir, car la pagination et le défilement infini présentent des avantages et des inconvénients.