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.

Découvrez la technique et comment la mettre en œuvre dans Vue, avec cet exemple de projet.

Premiers pas avec Vue-Awesome-Paginate

Vue-génial-paginer 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

src/main.js déposer:

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 auprès du .utiliser() méthode, vous pouvez donc 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 serez récupérer des données à partir d'une API avec Axios pour cette application.

Copiez le bloc de code ci-dessous dans votre App.vue déposer:

<scriptsetup>
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 JSONPlaceholderh1>
<divv-if="comments.length">
<divv-for="comment in comments"class="comment">
<p>{{ comment }}p>
div>
div>
<divv-else>
<p>Loading comments...p>
div>
div>
template>

Ce bloc de code utilise l'API de composition Vue pour construire un composant. Le composant utilise Axios pour récupérer les commentaires de l'API JSONPlaceholder avant que Vue ne le monte (surAvantMonter crochet). Il stocke ensuite les commentaires dans le commentaires tableau, 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.

Remplace le scénario section de votre App.vue fichier avec ce code :

<scriptsetup>
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: par page et page actuelle. 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 affichéCommentaires. Ceci calcule la plage de commentaires en fonction de la page actuelle et par page valeurs. Il renvoie une tranche du commentaires tableau dans cette plage, qui regroupera les commentaires sur différentes pages.

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

<template>
<div>
<h1>Vue 3 Pagination with JSONPlaceholderh1>
<divv-if="comments.length">
<divv-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>
<divv-else>
<p>Loading comments...p>
div>
div>
template>

Le v-pour attribut pour le rendu des listes dans cette section de modèle pointe vers le affichéCommentaires tableau. Le modèle ajoute le vue-génial-paginer composant, auquel l’extrait ci-dessus transmet les accessoires. Vous pouvez en savoir plus sur ces accessoires et sur d’autres accessoires dans le document officiel du package. documentation sur GitHub.

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.