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

Javascript vue.js table pagination, ajax asynchronous loading of data

高洛峰

Release： 2016-12-09 11:35:59

Original

1463 people have browsed it

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.

Code:

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

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

Copy after login

When clicking on the pagination link, watch Cur, the sub-component distributes page-to events. The @page-to="loadList" tag specifies the use of the parent component's loadList method to handle the event. The parent component receives the page value and then loads the data with ajax. It calculates and updates its own pageAll based on the server return. value, because the sub-component prop is dynamically bound to the pageAll object of the parent component through: all="pageAll", so the sub-component will be updated in conjunction.

Attached is a simple table component example:

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(&#39;请求列表失败&#39;)},
          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();

Copy after login