Hoe paginering in een Vue-applicatie te implementeren

Met paginering kunt u grote datasets opdelen in kleinere, beter beheersbare delen. Paginering maakt het voor gebruikers gemakkelijker om door grote datasets te navigeren en de informatie te vinden die ze zoeken.

Leer meer over de techniek en hoe u deze in Vue kunt implementeren met dit voorbeeldproject.

Aan de slag met Vue-Awesome-Paginate

Vue-awesome-pagina is een krachtige en lichtgewicht Vue-pagineringsbibliotheek die het proces van het maken van gepagineerde gegevensweergaven vereenvoudigt. Het biedt uitgebreide functies, waaronder aanpasbare componenten, gebruiksvriendelijke API's en ondersteuning voor verschillende pagineringsscenario's.

Om vue-awesome-paginate te gaan gebruiken, installeert u het pakket door deze terminalopdracht in uw projectmap uit te voeren:

npm install vue-awesome-paginate

Om het pakket vervolgens te configureren zodat het in uw Vue-applicatie werkt, kopieert u de onderstaande code naar het src/main.js bestand:

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

Met deze code wordt het pakket geïmporteerd en geregistreerd bij de .gebruik() methode, zodat u deze overal in uw toepassing kunt gebruiken. Het pagineringspakket wordt geleverd met een CSS-bestand, dat ook door het codeblok wordt geïmporteerd.

Het bouwen van de Test Vue-applicatie

Om te illustreren hoe het vue-awesome-paginate-pakket werkt, bouwt u een Vue-app die een voorbeeldgegevensset weergeeft. Jij zal zijn gegevens ophalen uit een API met Axios voor deze app.

Kopieer het onderstaande codeblok naar uw App.vue bestand:

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

Dit codeblok maakt gebruik van de Vue Composition API om een ​​onderdeel te bouwen. De component gebruikt Axios om opmerkingen op te halen van de JSONPlaceholder API voordat Vue deze koppelt (opBeforeMount haak). Vervolgens worden de opmerkingen opgeslagen in het opmerkingen array, met behulp van de sjabloon om ze weer te geven of een laadbericht totdat er opmerkingen beschikbaar zijn.

Vue-Awesome-Paginate integreren in uw Vue-app

Nu je een eenvoudige Vue-app hebt die gegevens ophaalt van een API, kun je deze aanpassen om het vue-awesome-paginate-pakket te integreren. U gebruikt deze pagineringsfunctie om de opmerkingen over verschillende pagina's te verdelen.

Vervang de script gedeelte van uw App.vue bestand met deze 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>

Dit codeblok voegt nog twee reactieve referenties toe: per pagina En huidige pagina. Deze verwijzingen slaan respectievelijk het aantal items op dat per pagina moet worden weergegeven en het huidige paginanummer.

De code creëert ook een berekende ref met de naam weergegevenOpmerkingen. Hiermee wordt het bereik van opmerkingen berekend op basis van de huidige pagina En per pagina waarden. Het geeft een stukje terug van de opmerkingen array binnen dat bereik, waardoor de opmerkingen op verschillende pagina's worden gegroepeerd.

Vervang nu de sjabloon sectie van uw App.vue-bestand met het volgende:

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

De v-voor attribuut voor het weergeven van lijsten in deze sjabloonsectie verwijst naar de weergegevenOpmerkingen reeks. De sjabloon voegt de vue-awesome-pagina component, waaraan het bovenstaande fragment rekwisieten doorgeeft. Je kunt meer over deze en aanvullende rekwisieten leren in de officiële versie van het pakket documentatie op GitHub.

Nadat u uw applicatie heeft vormgegeven, zou u een pagina moeten krijgen die er als volgt uitziet:

Klik op elke genummerde knop en je ziet een andere reeks opmerkingen.

Gebruik paginering of oneindig scrollen voor beter bladeren door gegevens

Je hebt nu een heel eenvoudige Vue-app die laat zien hoe je gegevens efficiënt kunt pagineren. U kunt ook oneindig scrollen gebruiken om lange gegevenssets in uw toepassing te verwerken. Zorg ervoor dat u rekening houdt met de behoeften van uw app voordat u een keuze maakt, aangezien paginering en oneindig scrollen voor- en nadelen hebben.