Heim > Web-Frontend > js-Tutorial > Hauptteil

vue.js Tabellenpaginierung Ajax asynchrones Laden von Daten

高洛峰
Freigeben: 2017-01-12 13:41:15
Original
1491 Leute haben es durchsucht

Vue.js ist eine leichte, leistungsstarke, komponentenfähige MVVM-Bibliothek mit einer sehr benutzerfreundlichen API.

Paging wird im Allgemeinen zusammen mit Tabellen verwendet. Es ist sinnvoller, den Paging-Link in eine unabhängige Komponente zu kapseln und ihn dann als Unterkomponente einzubetten. Komponente.

1. Registrieren Sie eine Komponente

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
}
}
});
Nach dem Login kopieren

Vorlage:

<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>
Nach dem Login kopieren

HTML:

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

Wann Wenn Sie auf den Paging-Link klicken, wird das Ereignis

page-to

ausgelöst und wir haben die Verwendung der übergeordneten Komponente

loadList

-Methode im HTML-Tag Um das Ereignis zu verarbeiten, müssen wir nur die aktuelle Seitennummer an die übergeordnete Komponente in der Komponente übergeben. Die übergeordnete Komponente ist für das Ajax-Laden von Daten und die Aktualisierung ihres eigenen pageAll-Werts verantwortlich.

Weitere Artikel zum asynchronen Laden von Daten mit vue.js-Tabellenpaginierung und Ajax finden Sie auf der chinesischen PHP-Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!