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 select操作控制方法小结
May 26 Javascript
Colortip基于jquery的信息提示框插件在IE6下面的显示问题修正方法
Dec 06 Javascript
jQuery实现页面滚动时层智能浮动定位实例探讨
Mar 29 Javascript
javascript中自定义对象的属性方法分享
Jul 12 Javascript
jQuery代码实现发展历程时间轴特效
Jul 30 Javascript
jQuery插件之Tocify动态节点目录菜单生成器附源码下载
Jan 08 Javascript
JavaScript电子时钟倒计时
Jan 09 Javascript
基于vue+ bootstrap实现图片上传图片展示功能
May 17 Javascript
webstorm+vue初始化项目的方法
Oct 18 Javascript
Django模板继承 extend标签实例代码详解
May 16 Javascript
微信小程序如何自定义table组件
Jun 29 Javascript
js判断在哪个浏览器打开项目的方法
Jan 21 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
腾讯QQ php程序员面试题目整理
2010/06/08 PHP
深入解析PHP中逗号与点号的区别
2013/08/05 PHP
js程序中美元符号$是什么
2008/06/05 Javascript
鼠标经过的文本框textbox变色
2009/05/21 Javascript
jquery插件制作教程 txtHover
2012/08/17 Javascript
javascript编码的几个方法详细介绍
2013/01/06 Javascript
关于js中for in的缺陷浅析
2013/12/02 Javascript
javascript中cookie对象用法实例分析
2015/01/30 Javascript
javascript实现动态改变层大小的方法
2015/05/14 Javascript
jQuery实现自动与手动切换的滚动新闻特效代码分享
2015/08/27 Javascript
基于jquery插件编写countdown计时器
2016/06/12 Javascript
Bootstrap选项卡学习笔记分享
2017/02/13 Javascript
js单页hash路由原理与应用实战详解
2017/08/14 Javascript
深入理解react-router 路由的实现原理
2018/09/26 Javascript
亲自动手实现vue日历控件
2019/06/26 Javascript
vue实现一拉到底的滑动验证
2019/07/25 Javascript
[40:31]Secret vs Alliacne 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
Python和php通信乱码问题解决方法
2014/04/15 Python
python实现生命游戏的示例代码(Game of Life)
2018/01/24 Python
利用python实现短信和电话提醒功能的例子
2019/08/08 Python
Python log模块logging记录打印用法解析
2020/01/20 Python
tensorflow2.0与tensorflow1.0的性能区别介绍
2020/02/07 Python
python实现将列表中各个值快速赋值给多个变量
2020/04/02 Python
Python读取Excel数据并生成图表过程解析
2020/06/18 Python
关于Python 解决Python3.9 pandas.read_excel(‘xxx.xlsx‘)报错的问题
2020/11/28 Python
python从ftp获取文件并下载到本地
2020/12/05 Python
HTML5 Canvas实现360度全景图的示例代码
2018/01/29 HTML / CSS
印度尼西亚值得信赖的第一家网店:Bhinneka
2018/07/16 全球购物
Lookfantastic希腊官网:英国知名美妆购物网站
2018/09/15 全球购物
iPad和Surface Pro蓝牙键盘:Brydge
2018/11/10 全球购物
What is view? why do we have view?
2012/06/22 面试题
我的动漫时代的创业计划书范文
2014/01/27 职场文书
幼儿园教研活动总结
2014/04/30 职场文书
2015年药品销售工作总结范文
2015/05/25 职场文书
2015年女工委工作总结
2015/07/27 职场文书
golang中的空接口使用详解
2021/03/30 Python