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： 2017-01-12 13:44:29

Original

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

Effect:

Javascript vue.js表格分页，ajax异步加载数据

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 a paging link is clicked, the child component distributes the page-to event through watch cur, and the parent is specified through the @page-to="loadList" tag. The component loadList method handles the event. The parent component receives the page value and then loads the data with ajax. It calculates and updates its own pageAll value based on the server return, because the child component prop dynamically binds the parent component's pageAll object through: all="pageAll". Therefore, the subcomponents will be updated together.

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

Thanks for reading, I hope it can help everyone, thank you for your support of this site!

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