Pagination dans Vue.js

Bonjour, Habr! Je vous présente la traduction de l'article " Pagination in Vue.js " de Denny Headrick.

La pagination améliore l'UX en permettant aux utilisateurs de visualiser les données dans de petits blocs ou sur des pages. Le composant Vue.js peut donc être paginé, ce qui nous permettra de ne visualiser qu'une partie de nos données à la fois.



Tout d'abord, je vais ajouter pièce par pièce à mon objet JavaScript. Et puis je vais montrer le modèle

De toutes les données locales, je n'ai besoin que des données - le numéro de page.

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

Pour les accessoires (propriétés), le transfert de données est obligatoire, mais je prendrai également l'argument taille pour le nombre maximum d'enregistrements.

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

Pour ma mise en œuvre, j'utiliserai des méthodes pour aller aux pages précédente (précédente) et suivante (suivante):

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

Une propriété calculée rapidement pour savoir combien de pages il y a:

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

Maintenant, la propriété paginatedData calculée est l'endroit où tout est combiné. Ce sont les données filtrées qui seront affichées.

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

Editorial : Au départ, j'ai fait quelque chose d'horrible et de lourdeur pour copier un tableau. L'utilisation de .slice est la meilleure approche. Merci, Alexander Karelas .

Et notre modèle

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

Je veux que les boutons fonctionnent quand ils n'ont qu'à le faire. Pour le bouton prevPage, j'ajouterai:

: disabled = "pageNumber == 0"

et pour le bouton nextPage j'ajouterai:

: disabled = "pageNumber> = pagecount -1"

Démo de travail de mon composant:


Il est parfois difficile de surestimer la situation, mais la pagination est une fonction simple que nous pouvons offrir à nos utilisateurs sans trop d'effort.

Merci d'avoir lu!

Denny Headrick est un développeur Web de l'USAF qui aime trop son travail. En plus de développer sur différentes plateformes et Vue.js, quand il le peut, il aime bloguer occasionnellement. Vous pouvez le suivre sur Twitter à @dennythecoder.