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

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

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>

HTML :

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

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 !