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 相关文章推荐
准确获得页面、窗口高度及宽度的JS
Nov 26 Javascript
JavaScript 指导方针
Apr 05 Javascript
jquery 中多条件选择器,相对选择器,层次选择器的区别
Jul 03 Javascript
JavaScript实现快速排序(自已编写)
Dec 19 Javascript
javascript实现简单的Map示例介绍
Dec 23 Javascript
JS拖动鼠标画出方框实现鼠标选区的方法
Aug 05 Javascript
JavaScript数组去重由慢到快由繁到简(优化篇)
Aug 26 Javascript
jQuery中get方法用法分析
Dec 07 Javascript
微信小程序 scroll-view实现上拉加载与下拉刷新的实例
Jan 21 Javascript
微信小程序 wx:for遍历循环使用实例解析
Sep 09 Javascript
ES6 Symbol在对象中的作用实例分析
Jun 06 Javascript
vue-router路由懒加载及实现的3种方式
Feb 28 Vue.js
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
php Undefined index的问题
2009/06/01 PHP
php网站被挂木马后的修复方法总结
2014/11/06 PHP
ThinkPHP模板Volist标签嵌套循环输出多维数组的方法
2016/03/23 PHP
php表单文件iframe异步上传实例讲解
2017/07/26 PHP
PHP htmlspecialchars()函数用法与实例讲解
2019/03/08 PHP
jQuery ctrl+Enter shift+Enter实现代码
2010/02/07 Javascript
Prototype源码浅析 String部分(三)之HTML字符串处理
2012/01/15 Javascript
JavaScript(js)设置默认输入焦点(focus)
2012/12/28 Javascript
jQuery 获取和设置select下拉框的值实现代码
2013/11/08 Javascript
js简单实现交换Li的值
2014/05/22 Javascript
jQuery实现的超简单点赞效果实例分析
2015/12/31 Javascript
基于jQuery实现多标签页切换的效果(web前端开发)
2016/07/24 Javascript
Vue异步组件使用详解
2017/04/08 Javascript
Vue列表页渲染优化详解
2017/07/24 Javascript
Bootstrap一款超好用的前端框架
2017/09/25 Javascript
javascript 中模板方法单例的实现方法
2017/10/17 Javascript
JS动画实现回调地狱promise的实例代码详解
2018/11/08 Javascript
JavaScript实现星级评价效果
2019/05/17 Javascript
Vue2.x通用条件搜索组件的封装及应用详解
2019/05/28 Javascript
详解微信小程序之提高应用速度小技巧
2020/01/07 Javascript
vue项目页面嵌入代码块vue-prism-editor的实现
2020/10/30 Javascript
Python多线程编程(六):可重入锁RLock
2015/04/05 Python
使用Python对Access读写操作
2017/03/30 Python
python SSH模块登录,远程机执行shell命令实例解析
2018/01/12 Python
Django项目中model的数据处理以及页面交互方法
2018/05/30 Python
python实现AES加密与解密
2019/03/28 Python
Python操作Sqlite正确实现方法解析
2020/02/05 Python
如何在vscode中安装python库的方法步骤
2021/01/06 Python
elf彩妆英国官网:e.l.f. Cosmetics英国(美国平价彩妆品牌)
2017/11/02 全球购物
公司行政专员岗位职责
2014/08/24 职场文书
语文课外活动总结
2014/08/27 职场文书
领导干部保密承诺书
2014/08/30 职场文书
毕业论文答辩开场白和答辩技巧
2015/05/27 职场文书
2016秋季小学开学寄语
2015/12/03 职场文书
pytorch DataLoader的num_workers参数与设置大小详解
2021/05/28 Python
python分分钟绘制精美地图海报
2022/02/15 Python