So implementieren Sie Paginierung in einer Vue-Anwendung

Mit der Paginierung können Sie große Datenmengen in kleinere, besser verwaltbare Teile unterteilen. Die Paginierung erleichtert Benutzern die Navigation in großen Datensätzen und das Auffinden der gesuchten Informationen.

Erfahren Sie in diesem Beispielprojekt mehr über die Technik und wie Sie sie in Vue implementieren.

Erste Schritte mit Vue-Awesome-Paginate

Vue-awesome-paginate ist eine leistungsstarke und leichte Vue-Paginierungsbibliothek, die den Prozess der Erstellung paginierter Datenanzeigen vereinfacht. Es bietet umfassende Funktionen, darunter anpassbare Komponenten, benutzerfreundliche APIs und Unterstützung für verschiedene Paginierungsszenarien.

Um vue-awesome-paginate zu verwenden, installieren Sie das Paket, indem Sie diesen Terminalbefehl in Ihrem Projektverzeichnis ausführen:

npm install vue-awesome-paginate

Um das Paket dann so zu konfigurieren, dass es in Ihrer Vue-Anwendung funktioniert, kopieren Sie den folgenden Code in die src/main.js Datei:

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");

Dieser Code importiert und registriert das Paket bei .verwenden() Methode, sodass Sie sie überall in Ihrer Anwendung verwenden können. Das Paginierungspaket enthält eine CSS-Datei, die der Codeblock auch importiert.

Erstellen der Test Vue-Anwendung

Um zu veranschaulichen, wie das vue-awesome-paginate-Paket funktioniert, erstellen Sie eine Vue-App, die einen Beispieldatensatz anzeigt. Du wirst sein Abrufen von Daten von einer API mit Axios für diese App.

Kopieren Sie den Codeblock unten in Ihren App.vue Datei:

<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>

Dieser Codeblock verwendet die Vue Composition API eine Komponente bauen. Die Komponente verwendet Axios, um Kommentare von der JSONPlaceholder-API abzurufen, bevor Vue sie bereitstellt (onBeforeMount Haken). Anschließend werden die Kommentare im gespeichert Kommentare Array, indem Sie die Vorlage verwenden, um sie anzuzeigen, oder eine Ladenachricht, bis Kommentare verfügbar sind.

Integrieren Sie Vue-Awesome-Paginate in Ihre Vue-App

Jetzt haben Sie eine einfache Vue-App, die Daten von einer API abruft. Sie können sie ändern, um das Paket vue-awesome-paginate zu integrieren. Mit dieser Paginierungsfunktion können Sie die Kommentare auf verschiedene Seiten aufteilen.

Ersetze das Skript Abschnitt Ihres App.vue Datei mit diesem 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>

Dieser Codeblock fügt zwei weitere reaktive Referenzen hinzu: pro Seite Und aktuelle Seite. Diese Referenzen speichern die Anzahl der pro Seite anzuzeigenden Elemente bzw. die aktuelle Seitenzahl.

Der Code erstellt außerdem eine berechnete Referenz mit dem Namen Angezeigte Kommentare. Dadurch wird die Reichweite der Kommentare basierend auf berechnet aktuelle Seite Und pro Seite Werte. Es gibt einen Teil davon zurück Kommentare Array innerhalb dieses Bereichs, das die Kommentare auf verschiedene Seiten gruppiert.

Ersetzen Sie nun die Vorlage Abschnitt Ihrer App.vue-Datei mit Folgendem:

<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>

Der v-für Attribut zum Rendern von Listen in diesem Vorlagenabschnitt verweist auf die Angezeigte Kommentare Array. Die Vorlage fügt das hinzu vue-awesome-paginate Komponente, an die das obige Snippet Requisiten übergibt. Mehr über diese und weitere Requisiten erfahren Sie im offiziellen Paket Dokumentation auf GitHub.

Nachdem Sie Ihre Anwendung gestaltet haben, sollten Sie eine Seite erhalten, die wie folgt aussieht:

Klicken Sie auf die einzelnen nummerierten Schaltflächen, um unterschiedliche Kommentare anzuzeigen.

Verwenden Sie Paginierung oder unendliches Scrollen für eine bessere Datendurchsuchung

Sie verfügen jetzt über eine sehr einfache Vue-App, die zeigt, wie Sie Daten effizient paginieren. Sie können auch unendliches Scrollen verwenden, um lange Datensätze in Ihrer Anwendung zu verarbeiten. Stellen Sie sicher, dass Sie die Anforderungen Ihrer App berücksichtigen, bevor Sie sich entscheiden, da Paginierung und unendliches Scrollen Vor- und Nachteile haben.