Vue.js bootstrap前端实现分页和排序
程序员文章站
2023-11-22 16:07:52
写之前先抱怨几句。本来一心一意做.net开发的,渐渐地成了只做前端。最近项目基本都用java做后台,我们这些.net的就成了前端,不是用wpf做界面,就是用html写web...
写之前先抱怨几句。本来一心一意做.net开发的,渐渐地成了只做前端。最近项目基本都用java做后台,我们这些.net的就成了前端,不是用wpf做界面,就是用html写web页面。
深知自己前端技术不足,以前虽说用asp.net前后台都做,但是,对于前端都是用现成的js库和页面模板,对于vue.js等框架基本没有接触过。
只怪自己不会写java,最近做一个项目,负责前端,后台传来数据不分页,前端收到所有数据后自己分页。我尽是无语。
正好最近在看vue.js。这个页面就用它来实现吧。顺便总结下。
效果图:
语法:
数据绑定 {{...}}或者v-model
<td >{{dataitem.id}}</td> <input v-model="message">
事件绑定 v-on
<th v-on:click="sortby('id')">id</th>
循环 v-for
<option v-for="item in arrpagesize" value="{{item}}">{{item}}</option>
判断 v-if
<span v-if="item==1" class="btn btn-default" v-on:click="showpage(1,$event)">首页</span>
过滤器 vue.filter
//定义 vue.filter( 'name' , function(value) { return value * .5 ; }); //使用 <td>{{dataitem.age | name}}</td> <input v-model="message | name">
排序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"> 数据 </div> <table class="table table-bordered table-responsive table-striped"> <tr> <th v-on:click="sortby('id')">id</th> <th>姓名</th> <th v-on:click="sortby('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">分页</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 btn-default" v-on:click="showpage(1,$event)"> 首页 </span> <span v-if="item==1" class="btn btn-default" v-on:click="showpage(pagecurrent-1,$event)"> 上一页 </span> <span v-if="item==1" class="btn btn-default" v-on:click="showpage(item,$event)"> {{item}} </span> <span v-if="item==1&&item<showpagesstart-1" class="btn btn-default disabled"> ... </span> <span v-if="item>1&&item<=pagecount-1&&item>=showpagesstart&&item<=showpageend&&item<=pagecount" class="btn btn-default" v-on:click="showpage(item,$event)"> {{item}} </span> <span v-if="item==pagecount&&item>showpageend+1" class="btn btn-default disabled"> ... </span> <span v-if="item==pagecount&&item!=1" class="btn btn-default" v-on:click="showpage(item,$event)"> {{item}} </span> <span v-if="item==pagecount" class="btn btn-default" v-on:click="showpage(pagecurrent+1,$event)"> 下一页 </span> <span v-if="item==pagecount" class="btn btn-default" v-on:click="showpage(pagecount,$event)"> 尾页 </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> </div> </div>
javascript
//只能输入正整数过滤器 vue.filter('onlynumeric', { // model -> view // 在更新 `<input>` 元素之前格式化值 read: function (val) { return val; }, // view -> model // 在写回数据之前格式化值 write: function (val, oldval) { var number = +val.replace(/[^\d]/g, '') return isnan(number) ? 1 : parsefloat(number.tofixed(2)) } }) //模拟获取数据 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; } //判断数据是否需要更新 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; } //处理分页点中样式 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; //计算分页按钮数据 if (this.pagecount > 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; } } } //排序 },sortby: function (sortparam) { this.sortparam = sortparam; this.sorttype = this.sorttype == -1 ? 1 : -1; } } });
源码下载:vue.js分页
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
上一篇: 详解在Linux下搭建Git服务器
下一篇: php google或baidu分页代码