The front-end of Vue. js bootstrap implements paging and sorting, and vue. jsbootstrap

The front-end of Vue. js bootstrap implements paging and sorting, and vue. jsbootstrap

Complain a few times before writing. Originally focused on. net development, it gradually became only a front-end. Recently, the project basically uses java as the backend. We use. net as the front end, either using wpf as the interface or using html to write web pages.

I knew that my front-end technology was insufficient. Although I used asp.net both in front and back, I used a ready-made js library and page template for the front-end, and I was not familiar with vue. js and other frameworks.

I only blame myself for not writing java. I recently worked on a project to take charge of the front-end. The data sent from the back-end is not paged. After receiving all the data from the front-end, I paging it myself. I am speechless.

I recently watched vue. js. Use this page to implement it. By the way.

:

Syntax:

Data Binding {...} or v-model

<td >{{dataItem.id}}</td><input v-model="message">

Event binding v-on

<th v-on:click="sortBy('id')">ID</th>

Loop v-

<option v-for="item in arrPageSize" value="{{item}}">{{item}}</option>

Judge v-if

<Span v-if = "item = 1" class = "btn-default" v-on: click = "showPage (1, $ event) "> homepage </span>

Filter Vue. filter

// Define Vue. filter ('name', function (value) {return value *. 5 ;}); // use <td >{{ dataItem. age | name }}</td> <input v-model = "message | name">

Sort orderBy

<tr v-for="dataItem in arrayData | orderBy sortparam sorttype">  <td >{{dataItem.id}}</td>  <td >{{dataItem.name}}</td>  <td>{{dataItem.age}}</td></tr>

Html

<Div id = "test" class = "form-group"> <div class = "form-group"> <div class = "page-header"> data </div> <table class = "table-bordered table-responsive table-striped"> <tr> <th v-on: click = "sortBy ('id')"> id </th> <th> name </th> <th v-on: click = "sortBy ('age ') "> age </th> </tr> <tr v-for =" dataItem in arrayData | orderBy sortparam sorttype "> <td >{{ dataItem. id }}</td> <td >{{ dataItem. name }}</td> <td >{{ dataItem. age}} </Td> </tr> </table> <div class = "page-header"> pagination </div> <div class = "pager" id = "pager"> <span class = "form-inline"> <select class = "form-control" v-model = "pagesize" v-on: change = "showPage (pageCurrent, $ event, true) "number> <option v-for =" item in arrPageSize "value =" {item }}" >{{ item }}</option> </select> </span> <template v-for = "item in pageCount + 1"> <span v-if = "item = 1" class = "btn-default" v-on: clic K = "showPage (1, $ event) "> Home </span> <span v-if =" item = 1 "class =" btn-default "v-on: click =" showPage (pageCurrent-1, $ event) "> previous page </span> <span v-if =" item = 1 "class =" btn-default "v-on: click = "showPage (item, $ event) ">{{ item }}</span> <span v-if =" item = 1 & item <showPagesStart-1 "class =" btn-default disabled ">... </span> <span v-if = "item> 1 & item <= pageCount-1 & item> = showPagesStart & item <= showPage End & item <= pageCount "class =" btn-default "v-on: click =" showPage (item, $ event) ">{{ item }}</span> <span v-if =" item = pageCount & item> showPageEnd + 1 "class =" btn-default disabled ">... </span> <span v-if = "item = pageCount & item! = 1 "class =" btn-default "v-on: click =" showPage (item, $ event) ">{{ item }}</span> <span v-if =" item = pageCount "class =" btn-default "v-on: click = "showPage (pageCurrent + 1, $ event) "> next page </span> <span v-if =" item = pageCount "class =" btn-default "v-on: click =" showPage (pageCount, $ event) "> last page </span> </template> <span class =" form-inline "> <input class =" pageIndex form-control "style =" width: 60px; text-align: center "type =" text "v-model =" pageCurrent | onlyNumeric "v-on: keyup. enter = "showPage (pageCurrent, $ event, true) "/> </span> <span >{{ pageCurrent }}/ {pageCount }}</span> </div>

Javascript

// Only the positive integer filter Vue can be entered. filter ('onlynumeric ', {// model-> view // format the value read: function (val) {return val;} before the' <input> 'element is updated ;}, // view-> model // format the Value write: function (val, oldVal) {var number = + val before writing back data. replace (/[^ \ d]/g, '') return isNaN (number )? 1: parseFloat (number. toFixed (2) }}) // simulate the acquisition of data var getData = function () {var result = []; for (var I = 0; I <500; I ++) {result [I] = {name: 'test' + I, id: I, age :( Math. random () * 100 ). toFixed () };} return result;} var vue = new Vue ({el: "# test", // run ready: function () {this. arrayDataAll = getData (); this. totalCount = this. arrayDataAll. length; this. showPage (this. pageCurrent, null, true) ;}, data :{/ /Total number of projects totalCount: 200, // Number of pages arrPageSize: [,], // current number of pages pageCount: 20, // current page pageCurrent: 1, // page size pagesize: 10, // Number of display page buttons showPages: 11, // The start display page button showPagesStart: 1, // The end display page button showPageEnd: 100, // all data arrayDataAll: [], // arrayData: [], // sorting field sortparam: "", // sorting method sorttype: 1,}, methods: {// paging method showPage: function (pageIndex, $ event, forceRefresh) {if (pageIndex> 0) {if (page Index> this. pageCount) {pageIndex = this. pageCount;} // determine whether to update var currentPageCount = Math. ceil (this. totalCount/this. pagesize); if (currentPageCount! = This. pageCount) {pageIndex = 1; this. pageCount = currentPageCount;} else if (this. pageCurrent = pageIndex & currentPageCount = this. pageCount & typeof (forceRefresh) = "undefined") {console. log ("not refresh"); return;} // process the style var buttons =$ ("# pager") in the pagination point "). find ("span"); for (var I = 0; I <buttons. length; I ++) {if (buttons.eq( I ).html ()! = PageIndex) {buttons. eq (I ). removeClass ("active");} else {buttons. eq (I ). addClass ("active") ;}}// retrieve paging data from all data var newPageInfo = []; for (var I = 0; I <this. pagesize; I ++) {var index = I + (pageIndex-1) * this. pagesize; if (index> this. totalCount-1) break; newPageInfo [newPageInfo. length] = this. arrayDataAll [index];} this. pageCurrent = pageIndex; this. arrayData = newPageInfo; // calculate the paging button data if (this. pageCo Unt> this. showPages) {if (pageIndex <= (this. showPages-1)/2) {this. showPagesStart = 1; this. showPageEnd = this. showPages-1; console. log ("showPage1")} else if (pageIndex> = this. pageCount-(this. showPages-3)/2) {this. showPagesStart = this. pageCount-this. showPages + 2; this. showPageEnd = this. pageCount; console. log ("showPage2")} else {console. log ("showPage3") this. showPagesStart = PageIndex-(this. showPages-3)/2; this. showPageEnd = pageIndex + (this. showPages-3)/2 ;}}// sort}, sortBy: function (sortparam) {this. sortparam = sortparam; this. sorttype = this. sorttype =-1? 1:-1 ;}}});

Reference URL: Using Vue. js and bootstrap to implement paging controls

Source code download: vue. js page

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.