Vue Paging Component Table-pagebar use instance to parse _javascript tips

Previous contact has been the original front-end model, JQUERY+BOOTSTRAP, miscellaneous DOM operations, cumbersome update binding. After contact with Vue, a new understanding of the front-end MVVM framework has been made. This article is based on the Webpack+vue build, because the previous work is mainly based on Java server development work, the front-end framework and components of the understanding, not deep enough to record in the front-end framework of the use and construction of the dots.

This paging component is developed with reference to the bootstrap-datatable end part of the page, and the related parameters increase the customization functionality.

The final use of the display effect diagram is as follows, data from Cnodejs "https://cnodejs.org/"

The bottom part of the page component consists mainly of the current number of data items on the left and the right pagination page number. The component code is as follows:

<template xmlns:v-on= "http://www.w3.org/1999/xhtml" xmlns:v-bind= "http://www.w3.org/1999/xhtml" > <div class= "Page-bar" > <div class= "page-size" > <div> <select v-on:change= "Menuchange ()" V-model= "Limit"  > <option v-for= "Item in Menu" V-bind:value= "item" >{{item}}</option> </select> record/page, show {start}} To {{end}} item records, total {{totalsize}} item </div> </div> <div class= "Page-con" > <ul> <li><a V On:click= "Firstclick ()" v-bind:class= "{' disabled ': cur = 1}" > Home </a></li> <li><a v-on:click= "Preclick ()" v-bind:class= "{' disabled ': cur = = 1}" > Prev </a></li> <li v-for= "per in pages" V-bind:class = "{' active ': cur = = per}" > <a v-on:click= "Pageclick (PER)" >{{/}}</a> </li> <li><a V On:click= "Nextclick ()" v-bind:class= "{' disabled ': cur = = totalpage}" > next page </a></li> <li><a V-on:click= "Lastclick ()" v-bind:class= "{' DisabLED ': cur = totalpage} ' > Last </a></li> <li><a> total <i>{{totalPage}}</i> page </a ></li> </ul> </div> <div class= "Clear-both" ></div> </div> </template> &L T;script> import Ajax from '..  /ajax ' Export default{props: [' Page-model '], data () {return {//initial page cur:1,//request address Url:this.pageModel.url? This.pageModel.url: "",///request parameter Param:this.pageModel.param? This.pageModel.param: {},//Request method defaults to get request Method:this.pageModel.method? This.pageModel.method: ' Get ',//per page display number default per page display 10 Limit:this.pageModel.menu? This.pagemodel.menu[0]: 10,//Bottom Partial page base default 5 perSize:this.pageModel.perSize? This.pagemodel.persize:5,//per page display quantity dropdown option Menu:this.pageModel.menu? This.pageModel.menu: [5, 10, 50],//Paging parameter custom name PageParamName:this.pageModel.pageParamName? This.pageModel.pageParamName: [' page ', ' limit '],//Current list shows the starting number of records start:0,//Current list shows end of record end:0,//Total pages Totalpage:
 0,//Total Recordstotalsize:0,//Paging request returns Data dataList: []}}, Ready () {this.getdata ();
  }, Methods: {//Home firstclick:function () {if (This.cur > 1) {this.cur = 1;
 This.getdata ();
  },//Last Lastclick:function () {if (This.cur < this.totalpage) {this.cur = This.totalpage;
 This.getdata ();
  },//prev Preclick:function () {if (This.cur > 1) {this.cur--;
 This.getdata ();
  },//Next page nextclick:function () {if (This.cur < this.totalpage) {this.cur++;
 This.getdata ();
  },//page pageclick:function (data) {if (data!= this.cur) {this.cur = data;

 This.getdata ();
 ///Refresh display record number Refreshpagecon:function () {This.start = (this.cur-1) * this.limit + 1;
 if (this.totalsize >= this.limit * this.cur) {this.end = This.limit * this.cur;
 else {this.end = this.totalsize;
 },//Paging request Getdata:function () {Let _this = this;
 This.param[this.pageparamname[0]] = this.cur;
THIS.PARAM[THIS.PAGEPARAMNAME[1]] = this.limit; Ajax ({URL: _this.url, Method: _this.method, Data: _this.param, Callback:function (res) {//return result DataSet This.da
  Talist = Res.data;

  Returns the total number of records _this.totalsize = 25;
  _this.totalpage = Math.ceil (_this.totalsize/_this.limit);
  _this.refreshpagecon ();
  _this. $dispatch (' Refresh ', this.datalist);
 }
 });
 (),//per page displays the number of records Drop-down menuchange:function () {this.getdata ();
 }, Getpage:function (Curpage, Totalpage, pagenum) {var leftpage, rightpage; Curpage = curpage > 1?
 Curpage:1; Curpage = curpage > Totalpage?
 Totalpage:curpage; Totalpage = curpage > Totalpage?
 Curpage:totalpage;
 Left page leftpage = Curpage-math.floor (PAGENUM/2); Leftpage = leftpage > 1?

 Leftpage:1;
 Right page Rightpage = curpage + Math.floor (PAGENUM/2); Rightpage = rightpage > Totalpage?

 Totalpage:rightpage;
 var curpagenum = rightpage-leftpage + 1; Left adjustment if (Curpagenum < pagenum && leftpage > 1) {leftpage = Leftpage-(pagenum-curpagenum); Leftpage = leftpage > 1?
  Leftpage:1;
 Curpagenum = rightpage-leftpage + 1; ///Right adjustment if (Curpagenum < pagenum && Rightpage < totalpage) {rightpage = Rightpage + (pagenum-curpa
  Genum); Rightpage = rightpage > Totalpage?
 Totalpage:rightpage;
 } var arr = [];
 for (var i = leftpage i <= rightpage; i++) {Arr.push (i);
 return arr;
 }, computed: {pages:function () {return this.getpage (this.cur, This.totalpage, this.persize);
 }} </script> <style> ul, Li {margin:0px;
 padding:0px;
 Li {list-style:none;
 Display:inline;
 }. Page-bar Li:first-child > a {margin-left:0px}. Page-bar a {border:1px solid #ddd;
 Text-decoration:none;
 position:relative;
 Float:left;
 PADDING:6PX 12px;
 Margin-left: -1px;
 line-height:1.42857143;
 Color: #337ab7;
 Cursor:pointer;
 }. Page-bar a:hover {background-color: #eee;
 }. Page-bar. Active a {color: #fff;
 Cursor:default; Background-coloR: #337ab7;
 Border-color: #337ab7;
 }. Page-bar I {font-style:normal;
 Color: #d44950;
 margin:0px 4px;
 font-size:12px;
 }. Page-bar. Page-con, page-size {width:50%;
 Display:block;
 height:30px;
 Float:left;
 line-height:30px;
 } page-bar. page-con ul {float:right;
 padding-left:15px;
 padding-right:15px;
 Display:inline-block;
 padding-left:0;
 }. Page-bar. page-size Div {padding-left:15px;
 padding-right:15px;
 font-size:14px;
 } a.disabled {color: #777;
 Background-color: #fff;
 Border-color: #ddd;
 cursor:not-allowed;
 } a.disabled:hover {background-color: #fff;
 }. clear-both {clear:both;
 Select {border:solid 1px #ddd;
 Appearance:none;
 -moz-appearance:none;
 -webkit-appearance:none; Background:url ("..
 /assets/images/arrow.png ") no-repeat scroll right center transparent;
 padding-right:15px;
 padding-left:15px;
 padding-top:2px;
 padding-bottom:2px;
 } select::-ms-expand {display:none;

 } </style>

Build module use,  

<template> <Navbar></Navbar> <div class= "Row" > <table class= "table" > <thead> ;tr> <th> title </th> <th width= "20%" > Release time </th> <th width= "10%" > author </th> <th Widt H= "10%" > Reply </th> <th width= "10%" > Access number </th> </tr> </thead> <tbody> <tr v-show = "!tabelempty" v-for= "item in DataList" > <td>{{item.title}}</td> <td>{{item.create_at}}</td > <td>{{item.author.loginname}}</td> <td>{{item.reply_count}}</td> <td>{{ item.visit_count}}</td> </tr> <tr v-show= "Tabelempty" class= "Empty" > <td colspan= "5" > No Matching Records </td> </tr> </tbody> </table> </div> <pagebar:p age-model= "Pagemodel" ></pageb ar> </template> <script> import Navbar from '. /components/navbar.vue ' Import Pagebar from '. /components/table-pagebar.vue ' export default {//Here is the official writingmethod, default export, ES6 components: {Navbar, Pagebar}, data () {return {allarticle: "", DataList: [], Pagemodel: {URL: ' Https://cnodejs.org/api/v1/topics ', menu: [5, M]},}}, computed: {tabelempty:function () {if (this.data
 List) {return false;
 else {return true;
 }}, Events: {refresh:function (e) {this.datalist = e;
 }} </script> <style> body, table {font-size:12px;
 } table {table-layout:fixed;
 Empty-cells:show;
 Border-collapse:collapse;
 width:100%;
 margin:10px 0;
 } TD {height:30px;
 } div.row {margin-left:15px;
 margin-right:15px;
 } H1, H2, H3 {font-size:12px;
 margin:0;
 padding:0;
 }. Table {border:1px solid #ddd;
 Background: #fff;
 }. Table Thead tr {background: #eee;
 }. table th {background-repeat:repeat-x;
 height:30px;
 Text-align:left;
 Vertical-align:middle;
 }. Table Tr.empty {text-align:center;
 }. Table TD,. Table TH {border:1px solid #ddd; Padding0 1em 0;

 }. Table Tr:nth-child (ODD) td {Background-color: #f5f5f5;
 } </style>

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.