vue.js 테이블 페이지 매김 ajax 데이터 비동기 로딩

Vue.js는 매우 사용하기 쉬운 API를 갖춘 경량, 고성능, 구성 요소 가능 MVVM 라이브러리입니다.

페이징은 일반적으로 테이블과 함께 사용됩니다. 페이징 링크는 테이블의 일부로 사용되며, 페이징 링크를 독립 구성 요소로 캡슐화한 다음 테이블 구성 요소에 하위 구성 요소로 포함하는 것이 더 합리적입니다. 요소.

1. 구성요소 등록

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

템플릿:

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

페이징 링크를 클릭하면

page-to

이벤트가 트리거되고 상위 구성 요소인

loadList

html 태그의 메서드 이벤트를 처리하려면 현재 페이지 번호를 구성 요소의 상위 구성 요소에 전달하기만 하면 됩니다. 상위 구성 요소는 Ajax가 데이터를 로드하고 자체 pageAll 값을 업데이트하는 일을 담당합니다.

vue.js 테이블 페이지 매기기 Ajax 비동기 데이터 로딩과 관련된 더 많은 기사를 보려면 PHP 중국어 웹사이트를 주목하세요!