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


Posted in Javascript onDecember 29, 2018

写之前先抱怨几句。本来一心一意做.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实现分页和排序效果

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

Javascript 相关文章推荐
JavaScript判断两种格式的输入日期的正确性的代码
Mar 25 Javascript
JavaScript高级程序设计 阅读笔记(十七) js事件
Aug 14 Javascript
javascript的动态加载、缓存、更新以及复用(一)
Jun 09 Javascript
jquery 实现输入邮箱时自动补全下拉提示功能
Oct 04 Javascript
利用jQuery实现一个简单的表格上下翻页效果
Mar 14 Javascript
JS实现微信里判断页面是否被分享成功的方法
Jun 06 Javascript
解决VUEX兼容IE上的报错问题
Mar 01 Javascript
webstorm+vue初始化项目的方法
Oct 18 Javascript
详解vue中使用微信jssdk
Apr 19 Javascript
对layer弹出框中icon数字参数的说明介绍
Sep 04 Javascript
vue移动端写的拖拽功能示例代码
Sep 09 Javascript
vue实现input输入模糊查询的三种方式
Aug 14 Vue.js
jQuery实现的鼠标拖动浮层功能示例【拖动div等任何标签】
Dec 29 #jQuery
javascript实现计算指定范围内的质数示例
Dec 29 #Javascript
基于vue.js组件实现分页效果
Dec 29 #Javascript
详解Vue.js v-for不支持IE9的解决方法
Dec 29 #Javascript
jQuery基于随机数解决中午吃什么去哪吃问题示例
Dec 29 #jQuery
Vue实现简单分页器
Dec 29 #Javascript
JS与SQL方式随机生成高强度密码示例
Dec 29 #Javascript
You might like
PHP date函数参数详解
2006/11/27 PHP
手把手教你打印出PDF(关于fpdf的简单应用)
2013/06/25 PHP
php获取远程图片体积大小的实例
2013/11/12 PHP
PHP判断远程图片或文件是否存在的实现代码
2014/02/20 PHP
百度地图API使用方法详解
2015/08/25 PHP
PHP性能分析工具xhprof的安装使用与注意事项
2017/12/19 PHP
thinkphp5 模型实例化获得数据对象的教程
2019/10/18 PHP
JavaScipt基本教程之前言
2008/01/16 Javascript
jquery 实现的全选和反选
2009/04/15 Javascript
Javascript 类与静态类的实现
2010/04/01 Javascript
javascript两种function的定义介绍及区别说明
2013/05/02 Javascript
javascript在当前窗口关闭前检测窗口是否关闭
2014/09/29 Javascript
jQuery中dom元素上绑定的事件详解
2015/04/24 Javascript
javascript动态生成树形菜单的方法
2015/11/14 Javascript
AngularJS Module方法详解
2015/12/08 Javascript
require简单实现单页应用程序(SPA)
2016/07/12 Javascript
JavaScript中的冒泡排序法
2016/08/03 Javascript
基于jQuery实现的查看全文功能【实用】
2016/12/11 Javascript
echarts学习笔记之图表自适应问题详解
2017/11/22 Javascript
vue 组件销毁并重置的实现
2020/01/13 Javascript
JS实现横向轮播图(初级版)
2020/06/24 Javascript
Python的爬虫包Beautiful Soup中用正则表达式来搜索
2016/01/20 Python
Python解惑之True和False详解
2017/04/24 Python
Python Selenium库的基本使用教程
2021/01/04 Python
详解如何将 Canvas 绘制过程转为视频
2021/01/25 HTML / CSS
美国网上花店:JustFlowers
2017/02/12 全球购物
迪卡侬英国官网:Decathlon英国
2017/04/08 全球购物
毕业生自我鉴定
2013/12/04 职场文书
教师党员一句话承诺
2014/03/28 职场文书
应聘教师求职信范文
2015/03/20 职场文书
三八节活动简报
2015/07/20 职场文书
汽车销售员工作总结
2015/08/12 职场文书
车位出租协议书范本
2016/03/19 职场文书
python实现的人脸识别打卡系统
2021/05/08 Python
python 中[0]*2与0*2的区别说明
2021/05/10 Python
CentOS7设置ssh服务以及端口修改方式
2022/12/24 Servers