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.

Pierwsze kroki z Vue-Awesome-Paginate

Vue-awesome-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 Twojej aplikacji Vue, skopiuj poniższy kod do pliku src/main.js :

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

Ten kod importuje i rejestruje pakiet za pomocą metody .use() , dzięki czemu możesz go 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. Dla tej aplikacji będziesz pobierać dane z API za pomocą Axios .

Skopiuj poniższy blok kodu do pliku App.vue :

<script setup>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 JSONPlaceholder</h1> <div v-if="comments.length"> <div v-for="comment in comments" class="comment"> <p>{{ comment }}</p> </div> </div> <div v-else> <p>Loading comments...</p> </div> </div></template>

Ten blok kodu używa interfejsu API Vue Composition do zbudowania komponentu. Komponent używa Axios do pobierania komentarzy z API JSONPlaceholder przed zamontowaniem go przez Vue ( hak onBeforeMount ). Następnie przechowuje komentarze w tablicy komentarzy , używając szablonu do ich wyświetlenia lub komunikatu ładującego, dopóki komentarze nie będą dostępne.

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 sekcję skryptu pliku App.vue następującym kodem:

<script setup>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 dwa kolejne odniesienia reaktywne: perPage i currentPage . Odniesienia te przechowują odpowiednio liczbę elementów wyświetlanych na stronie i numer bieżącej strony.

Kod tworzy również obliczony ref o nazwie displayComments . Spowoduje to obliczenie zakresu komentarzy na podstawie wartości currentPage i perPage . Zwraca fragment tablicy komentarzy z tego zakresu, co grupuje komentarze na różnych stronach.

Teraz zastąp sekcję szablonu pliku App.vue następującą sekcją:

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

Atrybut v-for do renderowania list w tej sekcji szablonu wskazuje na tablicę displayComments. Szablon dodaje komponent vue-awesome-paginate, do którego powyższy fragment przekazuje rekwizyty.

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

Kliknij każdy przycisk numerowany, 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. Przed dokonaniem wyboru upewnij się, że uwzględniłeś potrzeby swojej aplikacji, ponieważ paginacja i nieskończone przewijanie mają zalety i wady.