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

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

코드:

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 = Math.max(this.cur - mid,1);
        var right = Math.max(this.cur + this.pageNum - mid -1,this.pageNum);
        if (right > this.all ) { right = this.all}
        while (left <= right){
          list.push(left);
          left ++;
        }
        return list;
      },
      showLast: function(){
        return this.cur != this.all;
      },
      showFirst: function(){
        return this.cur != 1;
      }
    }
  });

템플릿:

<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;item_list&#39;>
  ...
  <pagination :cur="1" :all="pageAll" :page-num="10" @page-to="loadList"></pagination>
</div>

때 페이징 링크를 클릭하면 watch cur를 통해 하위 구성 요소가 page-to 이벤트를 배포하고 @page-to="loadList" 태그는 상위 구성 요소의 loadList 메서드를 사용하여 이벤트를 처리하도록 지정합니다. 페이지 값을 입력한 다음 ajax는 서비스에 따라 데이터를 로드합니다. 클라이언트는 자체 pageAll 값을 계산하고 업데이트하기 위해 반환합니다. 하위 구성 요소 소품은 all="pageAll"을 통해 상위 구성 요소의 pageAll 개체를 동적으로 바인딩하기 때문에 하위 구성 요소는 다음과 같습니다. 연동하여 업데이트되었습니다.

첨부된 내용은 간단한 테이블 구성요소 예입니다.

var vm = new Vue({
    el: "#item_list",
    data: {
      items : [],
      //分页参数
      pageAll:0, //总页数,根据服务端返回total值计算
      perPage:10 //每页数量
    },
    methods: {
      loadList:function(page){
        var that = this;
        $.ajax({
          url : "/getList",
          type:"post",
          data:{"page":page,"perPage":this.perPage},
          dataType:"json",
          error:function(){alert('请求列表失败')},
          success:function(res){
            if (res.status == 1) {
              that.items = res.data.list;
              that.perPage = res.data.perPage;
              that.pageAll = Math.ceil(res.data.total / that.perPage);//计算总页数
            }
          }
        });
      },
      //初始化
      init:function(){
        this.loadList(1);
      }
    }
  });
  vm.init();