Jak zaimplementować paginację w aplikacji Vue

Paginacja umożliwia dzielenie dużych zbiorów danych na mniejsze, łatwiejsze do zarządzania fragmenty. Paginacja ułatwia użytkownikom poruszanie się po dużych zbiorach danych i znajdowanie poszukiwanych informacji.

Dzięki temu przykładowemu projektowi poznasz tę technikę i sposób jej wdrożenia w Vue.

Pierwsze kroki z Vue-Awesome-Paginate

Vue-niesamowite-paginate to potężna i lekka biblioteka do paginacji Vue, która upraszcza proces tworzenia podzielonych na strony wyświetlaczy danych. Zapewnia kompleksowe funkcje, w tym konfigurowalne komponenty, łatwe w użyciu interfejsy API i obsługę różnych scenariuszy paginacji.

Aby rozpocząć korzystanie z vue-awesome-paginate, zainstaluj pakiet, uruchamiając tę ​​komendę terminala w katalogu projektu:

npm install vue-awesome-paginate

Następnie, aby skonfigurować pakiet do pracy w aplikacji Vue, skopiuj poniższy kod do pliku src/main.js plik:

import { createApp } from"vue";
import





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

Ten kod importuje i rejestruje pakiet w formacie .używać() metodę, dzięki czemu można jej używać w dowolnym miejscu aplikacji. Pakiet paginacji zawiera plik CSS, który blok kodu również importuje.

Budowanie aplikacji testowej Vue

Aby zilustrować działanie pakietu vue-awesome-paginate, zbudujesz aplikację Vue wyświetlającą przykładowy zbiór danych. Będziesz pobieranie danych z API za pomocą Axios dla tej aplikacji.

Skopiuj poniższy blok kodu do swojego Aplikacja.vue plik:

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

Ten blok kodu używa API kompozycji Vue zbudować komponent. Komponent używa Axios do pobierania komentarzy z API JSONPlaceholder przed zamontowaniem go przez Vue (onPrzedMontażem hak). Następnie przechowuje komentarze w pliku uwagi array, używając szablonu do ich wyświetlenia lub komunikatu ładującego do czasu udostępnienia komentarzy.

Integracja Vue-Awesome-Paginate z aplikacją Vue

Teraz masz prostą aplikację Vue, która pobiera dane z interfejsu API, możesz ją zmodyfikować, aby zintegrować pakiet vue-awesome-paginate. Użyjesz tej funkcji paginacji, aby podzielić komentarze na różne strony.

Zastąp scenariusz część twojego Aplikacja.vue plik z tym kodem:

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

Ten blok kodu dodaje jeszcze dwa reaktywne odniesienia: na stronę I bieżąca strona. Odniesienia te przechowują odpowiednio liczbę elementów wyświetlanych na stronie i numer bieżącej strony.

Kod tworzy również obliczony ref o nazwie wyświetlaneKomentarze. Oblicza to zakres komentarzy na podstawie bieżąca strona I na stronę wartości. Zwraca kawałek uwagi tablicę w tym zakresie, co zgrupuje komentarze na różnych stronach.

Teraz wymień szablon sekcję pliku App.vue zawierającą następujące informacje:

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

The v-dla atrybut do renderowania list w tej sekcji szablonu wskazuje na wyświetlaneKomentarze szyk. Szablon dodaje vue-awesome-paginate komponent, do którego powyższy fragment przekazuje właściwości. Więcej informacji na temat tych i dodatkowych rekwizytów znajdziesz w oficjalnym opisie pakietu dokumentacja na GitHubie.

Po wystylizowaniu aplikacji powinieneś otrzymać stronę wyglądającą tak:

Kliknij każdy przycisk numeryczny, a zobaczysz inny zestaw komentarzy.

Użyj paginacji lub nieskończonego przewijania, aby usprawnić przeglądanie danych

Masz teraz bardzo podstawową aplikację Vue, która pokazuje, jak efektywnie paginować dane. Możesz także użyć nieskończonego przewijania do obsługi długich zestawów danych w swojej aplikacji. Zanim dokonasz wyboru, rozważ potrzeby swojej aplikacji, ponieważ paginacja i nieskończone przewijanie mają zalety i wady.