Hvordan implementere paginering i en Vue-applikasjon

Paginering lar deg dele store datasett i mindre, mer håndterbare biter. Paginering gjør det enklere for brukere å navigere i store datasett og finne informasjonen de søker.

Lær om teknikken, og hvordan du implementerer den i Vue, med dette eksempelprosjektet.

Komme i gang med Vue-Awesome-Paginate

Vue-fantastisk-sidete er et kraftig og lett Vue-pagineringsbibliotek som forenkler prosessen med å lage paginerte datavisninger. Den gir omfattende funksjoner, inkludert tilpassbare komponenter, brukervennlige APIer og støtte for ulike pagineringsscenarier.

For å begynne å bruke vue-awesome-paginate, installer pakken ved å kjøre denne terminalkommandoen i prosjektkatalogen din:

npm install vue-awesome-paginate

Deretter, for å konfigurere pakken til å fungere i Vue-applikasjonen, kopierer du koden nedenfor til src/main.js fil:

import { createApp } from"vue";
import App from"./App.vue";
import VueAwesomePaginate from"vue-awesome-paginate";
import"vue-awesome-paginate/dist/style.css";





instagram viewer
createApp(App).use(VueAwesomePaginate).mount("#app");

Denne koden importerer og registrerer pakken med .bruk() metoden, slik at du kan bruke den hvor som helst i applikasjonen din. Pagineringspakken kommer med en CSS-fil, som kodeblokken også importerer.

Bygge Test Vue-applikasjonen

For å illustrere hvordan vue-awesome-paginate-pakken fungerer, bygger du en Vue-app som viser et eksempeldatasett. Du vil være hente data fra et API med Axios for denne appen.

Kopier kodeblokken nedenfor inn i din App.vue fil:

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

Denne kodeblokken bruker Vue Composition API å bygge en komponent. Komponenten bruker Axios for å hente kommentarer fra JSONPlaceholder API før Vue monterer den (påBeforeMount krok). Den lagrer deretter kommentarene i kommentarer array ved å bruke malen for å vise dem eller en lastemelding inntil kommentarer er tilgjengelige.

Integrering av Vue-Awesome-Paginate i Vue-appen din

Nå har du en enkel Vue-app som henter data fra en API, du kan endre den for å integrere vue-awesome-paginate-pakken. Du vil bruke denne pagineringsfunksjonen til å dele kommentarene inn på forskjellige sider.

Bytt ut manus delen av din App.vue fil med denne koden:

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

Denne kodeblokken legger til ytterligere to reaktive referanser: per side og nåværende side. Disse referansene lagrer henholdsvis antall elementer som skal vises per side og gjeldende sidenummer.

Koden lager også en beregnet ref kalt viste kommentarer. Dette beregner rekkevidden av kommentarer basert på nåværende side og per side verdier. Den returnerer en bit av kommentarer array innenfor dette området, som vil gruppere kommentarene til forskjellige sider.

Nå, bytt ut mal delen av App.vue-filen med følgende:

<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-for attributt for å gjengi lister i denne malen peker delen til viste kommentarer array. Malen legger til vue-fantastisk-sidete komponent, som kodebiten ovenfor sender rekvisitter til. Du kan lære mer om disse og andre rekvisitter i pakkens offisielle dokumentasjon på GitHub.

Etter styling av applikasjonen din, bør du få en side som ser slik ut:

Klikk på hver nummererte knapp, og du vil se et annet sett med kommentarer.

Bruk paginering eller uendelig rulling for bedre datasurfing

Du har nå en veldig grunnleggende Vue-app som viser hvordan du effektivt paginerer data. Du kan også bruke uendelig rulling for å håndtere lange datasett i applikasjonen din. Sørg for at du vurderer appens behov før du velger, siden paginering og uendelig rulling har fordeler og ulemper.