Vue.js table Pagination Sample _javascript Tips

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.Round (res.data.total/that.perpage);//Calculate total number of pages
   }}
  );
  },
  //Initialize
  Init:function () {
  this.loadlist (1);
  }}}
 );
 Vm.init ();

Wonderful feature sharing:jquery Paging functionality operations JavaScript paging functionality

This article has been organized into the "Vue.js front-end component Learning course", welcome to learn to read.

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.