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 이벤트가 배포되고 하위 구성 요소가 페이지를 배포합니다. -to 이벤트는 @page-to=" loadList" 태그를 통해 상위 구성요소의 loadList 메소드를 사용하여 이벤트를 처리하도록 지정합니다. 상위 구성요소는 페이지 값을 수신한 다음 자체 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();

읽어 주셔서 감사합니다. 모든 사람에게 도움이 되기를 바랍니다. 이 사이트를 지원해 주셔서 감사합니다!

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