Pagination di Vue.js

Halo, Habr! Saya persembahkan untuk Anda terjemahan artikel " Pagination in Vue.js " oleh Denny Headrick.

Pagination meningkatkan UX dengan memungkinkan pengguna memvisualisasikan data dalam blok kecil atau pada halaman. Jadi komponen Vue.js dapat dibuat paginasi, yang akan memungkinkan kita untuk melihat hanya sebagian dari data kita sekaligus.



Pertama, saya akan menambahkan sepotong demi sepotong ke objek JavaScript saya. Dan kemudian saya akan menunjukkan template

Dari semua data lokal, saya hanya perlu data - nomor halaman.

data(){ return { pageNumber: 0 //   0 } } 

Untuk properti (properti), transfer data wajib, tetapi saya juga akan mengambil argumen ukuran untuk jumlah maksimum catatan.

 props:{ listData:{ type:Array, required:true }, size:{ type:Number, required:false, default: 10 } } 

Untuk implementasi saya, saya akan menggunakan metode untuk pergi ke halaman sebelumnya (sebelumnya) dan berikutnya (berikutnya):

 methods:{ nextPage(){ this.pageNumber++; }, prevPage(){ this.pageNumber--; } } 

Properti yang dihitung dengan cepat untuk mengetahui berapa banyak halaman yang ada:

 pageCount(){ let l = this.listData.length, s = this.size; //     return Math.ceil(l/s); //  // return Math.floor(l/s); } 

Sekarang, properti paginatedData yang dihitung adalah tempat di mana semuanya digabungkan. Ini adalah data yang difilter yang akan ditampilkan.

 paginatedData(){ const start = this.pageNumber * this.size, end = start + this.size; return this.listData.slice(start, end); } 

Editorial : Saya awalnya melakukan sesuatu yang mengerikan dan rumit untuk menyalin array. Menggunakan .slice adalah pendekatan terbaik. Terima kasih, Alexander Karelas .

Dan template kita

 <div> <ul> <li v-for="p in paginatedData"> {{p.first}} {{p.last}} {{p.suffix}} </li> </ul> <button @click="prevPage"> Previous </button> <button @click="nextPage"> Next </button> </div> 

Saya ingin tombol berfungsi ketika mereka hanya perlu. Untuk tombol prevPage, saya akan menambahkan:

: disable = "pageNumber == 0"

dan untuk tombol NextPage saya akan menambahkan:

: disable = "pageNumber> = pagecount -1"

Demo kerja komponen saya:


Terkadang sulit untuk melebih-lebihkan situasi, tetapi pagination adalah fungsi sederhana yang dapat kami tawarkan kepada pengguna kami tanpa banyak usaha.

Terima kasih sudah membaca!

Denny Headrick adalah pengembang web USAF yang terlalu mencintai pekerjaannya. Selain berkembang di berbagai platform dan Vue.js, ketika dia bisa, dia suka blog sesekali. Anda dapat mengikutinya di Twitter di @dennythecoder.