Bagaimana Mengimplementasikan Pagination di Aplikasi Vue

Penomoran halaman memungkinkan Anda membagi kumpulan data besar menjadi bagian-bagian yang lebih kecil dan lebih mudah dikelola. Penomoran halaman memudahkan pengguna menavigasi kumpulan data besar dan menemukan informasi yang mereka cari.

Pelajari tentang teknik ini, dan cara mengimplementasikannya di Vue, dengan contoh proyek ini.

Memulai Dengan Vue-Awesome-Paginate

Vue-luar biasa-paginasi adalah pustaka penomoran halaman Vue yang kuat dan ringan yang menyederhanakan proses pembuatan tampilan data yang diberi nomor halaman. Ini menyediakan fitur komprehensif, termasuk komponen yang dapat disesuaikan, API yang mudah digunakan, dan dukungan untuk berbagai skenario penomoran halaman.

Untuk mulai menggunakan vue-awesome-paginate, instal paket dengan menjalankan perintah terminal ini di direktori proyek Anda:

npm install vue-awesome-paginate

Kemudian, untuk mengonfigurasi paket agar berfungsi di aplikasi Vue Anda, salin kode di bawah ini ke src/main.js mengajukan:

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

Kode ini mengimpor dan mendaftarkan paket ke .menggunakan() metode, sehingga Anda dapat menggunakannya di mana saja dalam aplikasi Anda. Paket penomoran halaman dilengkapi dengan file CSS, yang juga diimpor oleh blok kode.

Membangun Aplikasi Test Vue

Untuk mengilustrasikan cara kerja paket vue-awesome-paginate, Anda akan membuat aplikasi Vue yang menampilkan contoh kumpulan data. kamu akan menjadi mengambil data dari API dengan Axios untuk aplikasi ini.

Salin blok kode di bawah ini ke file Anda Aplikasi.vue mengajukan:

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

Blok kode ini menggunakan API Komposisi Vue untuk membangun sebuah komponen. Komponen ini menggunakan Axios untuk mengambil komentar dari JSONPlaceholder API sebelum Vue memasangnya (diSebelumMount kait). Kemudian menyimpan komentar di komentar array, menggunakan templat untuk menampilkannya atau pesan pemuatan hingga komentar tersedia.

Mengintegrasikan Vue-Awesome-Paginate ke dalam Aplikasi Vue Anda

Sekarang Anda memiliki aplikasi Vue sederhana yang mengambil data dari API, Anda dapat memodifikasinya untuk mengintegrasikan paket vue-awesome-paginate. Anda akan menggunakan fitur penomoran halaman ini untuk membagi komentar ke dalam halaman yang berbeda.

Ganti naskah bagian dari Anda Aplikasi.vue file dengan kode ini:

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

Blok kode ini menambahkan dua referensi reaktif lagi: per halaman Dan halaman saat ini. Referensi ini masing-masing menyimpan jumlah item yang akan ditampilkan per halaman dan nomor halaman saat ini.

Kode ini juga membuat referensi terkomputasi bernama ditampilkanKomentar. Ini menghitung rentang komentar berdasarkan halaman saat ini Dan per halaman nilai-nilai. Ini mengembalikan sepotong komentar array dalam rentang itu, yang akan mengelompokkan komentar ke halaman berbeda.

Sekarang, ganti templat bagian file App.vue Anda dengan yang berikut:

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

Itu v-untuk atribut untuk merender daftar di bagian templat ini menunjuk ke ditampilkanKomentar Himpunan. Templat menambahkan vue-awesome-paginasi komponen, yang mana cuplikan di atas meneruskan propsnya. Anda dapat mempelajari lebih lanjut tentang ini dan alat peraga tambahan di paket resminya dokumentasi di GitHub.

Setelah menata aplikasi Anda, Anda akan mendapatkan halaman seperti ini:

Klik pada setiap tombol bernomor, dan Anda akan melihat serangkaian komentar yang berbeda.

Gunakan Pagination atau Pengguliran Tak Terbatas untuk Penjelajahan Data yang Lebih Baik

Anda sekarang memiliki aplikasi Vue yang sangat mendasar yang menunjukkan cara membuat paginasi data secara efisien. Anda juga dapat menggunakan pengguliran tak terbatas untuk menangani kumpulan data panjang di aplikasi Anda. Pastikan Anda mempertimbangkan kebutuhan aplikasi Anda sebelum memilih, karena penomoran halaman dan pengguliran tak terbatas memiliki kelebihan dan kekurangan.