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 相关文章推荐
jquery post方式传递多个参数值后台以数组的方式进行接收
Jan 11 Javascript
js中top的作用深入剖析
Mar 04 Javascript
jQuery事件用法实例汇总
Aug 29 Javascript
jQuery中odd选择器的定义和用法
Dec 23 Javascript
jQuery实现菜单式图片滑动切换
Mar 14 Javascript
微信小程序 数据访问实例详解
Oct 08 Javascript
vue开发心得和技巧分享
Oct 27 Javascript
vue.js移动数组位置,同时更新视图的方法
Mar 08 Javascript
使用淘宝镜像cnpm安装Vue.js的图文教程
May 17 Javascript
Vue批量图片显示时遇到的路径被解析问题
Mar 28 Javascript
vue2 中二级路由高亮问题及配置方法
Jun 10 Javascript
JavaScript实现多文件下载方法解析
Aug 07 Javascript
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
新安装的MySQL数据库需要注意的安全知识
2008/07/30 PHP
phpmyadmin显示utf8_general_ci中文乱码的问题终级篇
2013/04/08 PHP
PHP设计模式之调解者模式的深入解析
2013/06/13 PHP
解析php file_exists无效的解决办法
2013/06/26 PHP
用php实现分页效果的示例代码
2020/12/10 PHP
HTML中Select不用Disabled实现ReadOnly的效果
2008/04/07 Javascript
utf-8编码引起js输出中文乱码的解决办法
2010/06/23 Javascript
浅谈JavaScript实现面向对象中的类
2014/12/09 Javascript
使用Chart.js图表库制作漂亮的响应式表单
2015/10/28 Javascript
js表单中选择框值的获取及表单的序列化
2015/12/17 Javascript
基于jquery二维码生成插件qrcode
2017/01/07 Javascript
js实现京东轮播图效果
2017/06/30 Javascript
Vue实现的父组件向子组件传值功能示例
2019/01/19 Javascript
node(koa2) web应用模块介绍详解
2019/03/29 Javascript
Vue 动态组件components和v-once指令的实现
2019/08/30 Javascript
JS实现电脑虚拟键盘的操作
2020/06/24 Javascript
JavaScript React如何修改默认端口号方法详解
2020/07/28 Javascript
使用Django的模版来配合字符串翻译工作
2015/07/27 Python
关于Python中浮点数精度处理的技巧总结
2017/08/10 Python
python中利用await关键字如何等待Future对象完成详解
2017/09/07 Python
python中获得当前目录和上级目录的实现方法
2017/10/12 Python
Python获取二维矩阵每列最大值的方法
2018/04/03 Python
将Dataframe数据转化为ndarry数据的方法
2018/06/28 Python
python实现批量视频分帧、保存视频帧
2019/05/31 Python
python字典改变value值方法总结
2019/06/21 Python
python实现数据清洗(缺失值与异常值处理)
2019/12/02 Python
Python标准库shutil模块使用方法解析
2020/03/10 Python
python利用faker库批量生成测试数据
2020/10/15 Python
如何使用python-opencv批量生成带噪点噪线的数字验证码
2020/12/21 Python
HTML+CSS3 模仿Windows7 桌面效果
2010/06/17 HTML / CSS
Lacoste澳大利亚官网:服装、鞋类及配饰
2018/11/14 全球购物
称象教学反思
2014/02/03 职场文书
党的群众路线教育实践活动对照检查剖析材料
2014/10/09 职场文书
2015年元旦晚会活动总结(学生会)
2014/11/28 职场文书
详解Python中__new__方法的作用
2022/03/31 Python
MySQL count(*)统计总数问题汇总
2022/09/23 MySQL