Maison > interface Web > js tutoriel > vue.js pagination des tables ajax chargement asynchrone des données

vue.js pagination des tables ajax chargement asynchrone des données

高洛峰
Libérer: 2017-01-12 13:41:15
original
1522 Les gens l'ont consulté

Vue.js est une bibliothèque MVVM légère, hautes performances et composable avec une API très facile à utiliser.

La pagination est généralement utilisée avec des tableaux. Le lien de pagination est utilisé dans le cadre du tableau. Il est plus raisonnable d'encapsuler le lien de pagination dans un composant indépendant, puis de l'intégrer dans le composant de table en tant que sous-. composant.

1. Enregistrez un composant

js

Vue.component('pagination',{
template:'#paginationTpl',
replace:true,
props:['cur','all','pageNum'],
methods:{
//页码点击事件
btnClick: function(index){
if(index != this.cur){
this.cur = index
}
}
},
watch:{
"cur" : function(val,oldVal) {
this.$dispatch('page-to', val)
}
},
computed:{
indexes : function(){
var list = []
//计算左右页码
var mid = parseInt(this.pageNum / 2);//中间值
var left = this.cur - mid;
var right = Math.max(this.cur + this.pageNum - mid -1,this.pageNum);
if (left < 1) {left = 1}
if (right > this.all ) { right = this.all}
while (left <= right){
list.push(left)
left ++
}
return list;
},
showLast: function(){
if(this.cur == this.all){
return false
}
return true
},
showFirst: function(){
if(this.cur == 1){
return false
}
return true
}
}
});
Copier après la connexion

Modèle :

<script type="text/template" id="paginationTpl">
<nav v-if="all > 1">
<ul class="pagination">
<li v-if="showFirst"><a href="javascript:" @click="cur--">«</a></li>
<li v-for="index in indexes" :class="{ &#39;active&#39;: cur == index}">
<a @click="btnClick(index)" href="javascript:">{{ index }}</a>
</li>
<li v-if="showLast"><a @click="cur++" href="javascript:">»</a></li>
<li><a>共<i>{{all}}</i>页</a></li>
</ul>
</nav>
</script>
Copier après la connexion

HTML :

<div id=&#39;parentEle&#39;>
...
<pagination :cur="1" :all="pageAll" :page-num="10" @page-to="loadList"></pagination>
</div>
Copier après la connexion

Quand Lorsque vous cliquez sur le lien de pagination, l'événement

page-to

sera déclenché, et nous avons spécifié l'utilisation du composant parent

loadList

méthode dans la balise html Pour gérer l'événement, il suffit de transmettre le numéro de page actuel au composant parent dans le composant. Le composant parent est responsable du chargement des données ajax et de la mise à jour de sa propre valeur pageAll.

Pour plus d'articles liés à la pagination de table vue.js et au chargement asynchrone des données en ajax, veuillez faire attention au site Web PHP chinois !

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal