Shulou(Shulou.com)05/31 Report--

This article mainly introduces the relevant knowledge of "how to achieve paging and sorting in front of Vue.js+bootstrap". The editor shows you the operation process through an actual case. The method of operation is simple and fast, and it is practical. I hope this article "how to achieve paging and sorting in front of Vue.js+bootstrap" can help you solve the problem.

Effect picture:

Syntax:

Data binding {{...}} or v-model

{{dataItem.id}}

Event binding v-on

ID

Cyclic v-for

{{item}}

Judge v-if

Home page

Filter Vue.filter

/ / define Vue.filter ('name', function (value) {return value * .5;}); / / use {{dataItem.age | name}}

Sort orderBy

{{dataItem.id}} {{dataItem.name}} {{dataItem.age}}

Html

Data ID name, age {{dataItem.id}} {{dataItem.name}} {{dataItem.age}} paging {{item}} first page {{item}}... {{item}}... {{item}} next last page {{pageCurrent}} / {{pageCount}}

Javascript

/ / only positive integer filter Vue.filter can be entered ('onlyNumeric', {/ / model-> view / / formatted value read: function (val) {return val) before updating the ``element }, / / view-> model / / format the value write: function (val, oldVal) {var number = + val.replace (/ [^\ d] / g,'') return isNaN (number)? 1: parseFloat (number.toFixed (2)}}) / / simulate data acquisition 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", //加载完成后执行 ready:function(){ this.arrayDataAll = getData(); this.totalCount = this.arrayDataAll.length; this.showPage(this.pageCurrent, null, true); }, data: { //总项目数 totalCount: 200, //分页数 arrPageSize:[10,20,30,40], //当前分页数 pageCount: 20, //当前页面 pageCurrent: 1, //分页大小 pagesize: 10, //显示分页按钮数 showPages: 11, //开始显示的分页按钮 showPagesStart: 1, //结束显示的分页按钮 showPageEnd: 100, //所有数据 arrayDataAll:[], //分页数据 arrayData: [], //排序字段 sortparam:"", //排序方式 sorttype:1, }, methods: { //分页方法 showPage: function (pageIndex, $event, forceRefresh) { if (pageIndex >

0) {if (pageIndex > this.pageCount) {pageIndex = this.pageCount;} / / determine whether the data needs to be updated 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;} / / handles the style var buttons = $("# pager"). 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"); } } //从所有数据中取分页数据 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 paging button data if (this.pageCount > this.showPages) {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;}}); this is the end of the introduction on "how to paginate and sort the Vue.js+bootstrap front end". Thank you for your reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.