Vue.js bootstrap前端实现分页和排序


Posted in Javascript onMarch 10, 2017

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

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

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

正好最近在看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分页

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

Javascript 相关文章推荐
jquery $.ajax入门应用一
Nov 19 Javascript
ASP.NET jQuery 实例1(在TextBox里面创建一个默认提示)
Jan 13 Javascript
javascript检测两个数组是否相似
May 19 Javascript
jQuery下拉友情链接美化效果代码分享
Aug 26 Javascript
跟我学习JScript的Bug与内存管理
Nov 18 Javascript
js判断登陆用户名及密码是否为空的简单实例
May 16 Javascript
利用jquery给指定的table动态添加一行、删除一行的方法
Oct 12 Javascript
JavaScript原生数组Array常用方法
Apr 06 Javascript
JS动态添加元素及绑定事件造成程序重复执行解决
Dec 07 Javascript
使用Vue实现图片上传的三种方式
Jul 17 Javascript
vue + el-form 实现的多层循环表单验证
Nov 25 Vue.js
JS实现简单的九宫格抽奖
Jun 28 Javascript
JavaScript组件开发之输入框加候选框
Mar 10 #Javascript
原生javascript移动端滑动banner效果
Mar 10 #Javascript
jQuery弹出窗口简单实现代码
Mar 09 #Javascript
JavaScript实现弹窗效果代码分析
Mar 09 #Javascript
详解Vue方法与事件
Mar 09 #Javascript
Vue实现自带的过滤器实例
Mar 09 #Javascript
Vue中fragment.js使用方法详解
Mar 09 #Javascript
You might like
如何使用Strace调试工具
2013/06/03 PHP
php中fsockopen用法实例
2015/01/05 PHP
thinkPHP+mysql+ajax实现的仿百度一下即时搜索效果详解
2019/07/15 PHP
Javascript 各浏览器的 Javascript 效率对比
2008/01/23 Javascript
固定表格行列(expression)在IE下适用
2013/07/25 Javascript
setInterval()和setTimeout()的用法和区别示例介绍
2013/11/17 Javascript
jQuery中使用Ajax获取JSON格式数据示例代码
2013/11/26 Javascript
js四舍五入数学函数round使用实例
2014/05/09 Javascript
js中定义一个变量并判断其是否为空的方法
2014/05/13 Javascript
js匿名函数的调用示例(形式多种多样)
2014/08/20 Javascript
使用jquery实现放大镜效果
2014/09/02 Javascript
jQuery简单实现禁用右键菜单
2015/03/10 Javascript
深入讲解AngularJS中的自定义指令的使用
2015/06/18 Javascript
javascript密码强度校验代码(两种方法)
2015/08/10 Javascript
学习JavaScript设计模式之观察者模式
2020/04/22 Javascript
Nodejs如何搭建Web服务器
2016/03/28 NodeJs
深入Vue-Router路由嵌套理解
2018/08/13 Javascript
layui+SSM的数据表的增删改实例(利用弹框添加、修改)
2019/09/27 Javascript
使用next.js开发网址缩短服务的方法
2020/06/17 Javascript
[01:00:35]2018DOTA2亚洲邀请赛3月30日B组 EffcetVSMineski
2018/03/31 DOTA
[01:04:48]VGJ.S vs TNC Supermajor 败者组 BO3 第一场 6.6
2018/06/07 DOTA
[01:16:12]完美世界DOTA2联赛PWL S2 FTD vs Inki 第一场 11.21
2020/11/23 DOTA
Python 元类使用说明
2009/12/18 Python
Python判断操作系统类型代码分享
2014/11/22 Python
django静态文件加载的方法
2018/05/20 Python
Python之list对应元素求和的方法
2018/06/28 Python
pandas对dataFrame中某一个列的数据进行处理的方法
2019/07/08 Python
python3发送邮件需要经过代理服务器的示例代码
2019/07/25 Python
python命名空间(namespace)简单介绍
2019/08/10 Python
python Scrapy爬虫框架的使用
2021/01/21 Python
html5 css3 动态气泡按钮实例演示
2012/12/02 HTML / CSS
女方回门宴答谢词
2014/01/14 职场文书
《姥姥的剪纸》教学反思
2014/02/25 职场文书
挂靠协议书
2015/01/27 职场文书
2016年敬老月活动总结
2016/04/05 职场文书
应届毕业生的自我评价
2019/06/21 职场文书