vue.js table pagination ajax asynchronous loading of data-JS Tutorial-php.cn

vue.js table pagination ajax asynchronous loading of data

高洛峰

Release： 2017-01-12 13:41:15

Original

1546 people have browsed it

Vue.js is a lightweight, high-performance, componentable MVVM library, and has a very easy-to-use API.

Paging is generally used together with tables. The paging link is used as part of the table. It is more reasonable to encapsulate the paging link into an independent component and then embed it into the table component as a sub-component.

1. Register a component

Vue.component(&#39;pagination&#39;,{
template:&#39;#paginationTpl&#39;,
replace:true,
props:[&#39;cur&#39;,&#39;all&#39;,&#39;pageNum&#39;],
methods:{
//页码点击事件
btnClick: function(index){
if(index != this.cur){
this.cur = index
}
}
},
watch:{
"cur" : function(val,oldVal) {
this.$dispatch(&#39;page-to&#39;, 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
}
}
});

Copy after login

Template:

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

Copy after login

HTML:

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

Copy after login

When you click the paging link, The

page-to

event will be triggered, and we specified in the html tag to use the parent component

loadList

method to handle the event. We only need to Just pass the current page number to the parent component in the component. The parent component is responsible for loading data via ajax and updating its own pageAll value.

For more articles related to vue.js table pagination ajax asynchronous loading of data, please pay attention to the PHP Chinese website!