Vue.js结合bootstrap前端实现分页和排序效果

写之前先抱怨几句。本来一心一意做.net开发的，渐渐地成了只做前端。最近项目基本都用java做后台，我们这些.net的就成了前端，不是用wpf做界面，就是用html写web页面。

深知自己前端技术不足，以前虽说用asp.net前后台都做，但是，对于前端都是用现成的js库和页面模板，对于vue.js等框架基本没有接触过。

只怪自己不会写java，最近做一个项目，负责前端，后台传来数据不分页，前端收到所有数据后自己分页。我尽是无语。

正好最近在看vue.js。这个页面就用它来实现吧。顺便总结下。

排序从下图中可以看出来，只是字符串的排序，没有实现数字的排序，知道如何用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结合bootstrap实现分页控件

源码下载：vue.js实现分页和排序效果

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。