欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2023-03-30 18:44:15
写之前先抱怨几句。本来一心一意做.net开发的,渐渐地成了只做前端。最近项目基本都用java做后台,我们这些.net的就成了前端,不是用wpf做界面,就是用html写web...

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

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

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

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

排序从下图中可以看出来,只是字符串的排序,没有实现数字的排序,知道如何用vue.js在前端解决的朋友希望赐教

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

语法

数据绑定 {{...}}或者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实现分页和排序效果

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