Javascript vue.js table pagination, Ajax asynchronous Load Data _ basics

Page General and table together, pagination link as part of the table, the paging link encapsulated into a separate component, and then as a child component embedded in the table component, this is more reasonable.

Effect:

Code:

1. Register a component

Js

 Vue.component (' pagination ', {Template: ' #paginationTpl ', replace:true, props:[')
          Cur ', ' all ', ' pagenum '], methods:{//page number Click event 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 = [];
        Calculates the left and right pages var mid = parseint (THIS.PAGENUM/2);//median value 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;
}
    }
  }); 

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= "{' active ': cur = = index}" >
        <a @click = "Btnclick (index)" href= " javascript: ">{{index}}</a>
      </li>
      <li v-if=" Showlast "><a @click =" cur++ "href=" javascript: ">»</a></li>
      <li><a> Total <i>{{all}}</i> page </a></li >
    </ul>
  </nav>
</script>

Html:

<div id= ' item_list ' > ...
  <pagination:cur= "1": all= "Pageall":p age-num= "ten" @page-to= "loadlist" ></pagination>
</div>

When clicking on the paging link, the Watch cur distributes the Page-to event through the child component, specifies that the parent component Loadlist method is used to handle the event through the @page-to= "loadlist" tab, the parent component receives the page value and then the AJAX loads the data. Returns the calculation and updates its own Pageall value based on the service side, because the subcomponent prop dynamically binds the Pageall object of the parent component through: all= "Pageall", so the subassembly is updated.

Attach an example of a simple table component:

var vm = new Vue ({
    el: "#item_list",
    data: {
      items: [],
      //paging parameter
      pageall:0,//Total number of pages, calculated according to the service-side return totals
      perpage:10//per page number
    },
    methods: {
      loadlist:function (page) {
        var = this;
        $.ajax ({
          URL: "/getlist",
          type: "Post",
          data:{"page":p Age, "Perpage": This.perpage},
          DataType: "JSON",
          error:function () {alert (' request list failed ')},
          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);//Calculate total number of pages
            }}
        );
      },
      //Initialize
      Init:function () {
        this.loadlist (1);
      }}}
  );
  Vm.init ();

Thank you for reading, I hope to help you, thank you for your support for this site!