基于vue2的table分页组件实现方法


Posted in Javascript onMarch 20, 2017

本文实例为大家分享了vue2 table分页组件的具体代码,供大家参考,具体内容如下

pagination.js:

(function(){
 var template = '<div class="page-bar" > \
      <div class="info">{{info}}</div>\
      <div class="showpages">每页<select class="showpages-select" v-on:change="pageschange" v-model="selected" ><option v-for="item in showpages">{{item}}</option></select>条</div>\
      <div class="pagesbtn"><ul v-on:click="setpage"> \
      <li ><a v-bind:class="setButtonClass(0)" v-on:click="firstPage()">首页</a></li> \
      <li><a v-bind:class="setButtonClass(0)" v-on:click="prvePage()">上一页</a></li> \
      <li v-for="index in indexs" v-bind:class="{ active: cur == index }"> \
       <a v-on:click="btnclick(index)" >{{ index < 1 ? "..." : index }}</a> \
      </li> \
      <li ><a v-bind:class="setButtonClass(1)" v-on:click="nextPage()">下一页</a></li> \
      <li ><a v-bind:class="setButtonClass(1)" v-on:click="lastPage()">尾页</a></li> \
      </ul></div> \
     </div>\
     '
 var pagination = Vue.extend({
  template: template,
  props: ["cur", "all", "selected", "showpages", "info"],
  computed: {
   indexs: function () {
    var left = 1
    var right = this.all
    var ar = []
    if (this.all >= 11) {
     if (this.cur > 5 && this.cur < this.all - 4) {
      left = this.cur - 5
      right = this.cur + 4
     } else {
      if (this.cur <= 5) {
       left = 1
       right = 10
      } else {
       right = this.all
       left = this.all - 9
      }
     }
    }
    while (left <= right) {
     ar.push(left)
     left++
    }
    if (ar[0] > 1) {
     ar[0] = 1;
     ar[1] = -1;
    }
    if (ar[ar.length - 1] < this.all) {
     ar[ar.length - 1] = this.all;
     ar[ar.length - 2] = 0;
    }
    return ar
   }
  },
  methods: {
   btnclick: function (page) {
    this.cur = page;
   },
   nextPage: function () {
    if (this.cur >= this.all) {
     this.cur=this.all;
    }else{
     this.cur++;
    }
   },
   prvePage: function () {
    if (this.cur <= 1) {
      this.cur=1;
    }else{
     this.cur--;
    }
   },
   firstPage: function () {
    this.cur=1;
   },
   lastPage: function () {
    this.cur=this.all;
   },
   setButtonClass: function (isNextButton) {
    if (isNextButton) {
     return this.cur >= this.all ? "page-button-disabled" : ""
    }
    else {
     return this.cur <= 1 ? "page-button-disabled" : ""
    }
   },
   setpage:function () {
    this.$emit('mypage', this.cur);
   },
   pageschange:function () {
    this.$emit('pageschange', this.selected);
   }
  }
 })
 window.Pagination = pagination
})()

pagination.css:

ul, li {
margin: 0;
padding: 0;
}


.page-bar {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
float: right;
border-radius: 4px;
}
.page-bar .info{
float: left;
margin-left:16px;
font-size: 16px;
height: 100%;
}
.page-bar .showpages{
float: left;
font-size: 16px;
margin-left: 16px;
height: 100%;
}
.page-bar .showpages .showpages-select{
width: 70px;
margin: 0 10px;
height: 28px
}
.page-bar .pagesbtn{
float: left;
margin-left:16px;
width: 650px;
height: 100%;
}
.page-bar .pagesbtn ul{
text-align: center;
width: 100%;
}
.page-button-disabled {
color:#ddd !important;
}
.page-bar li {
list-style: none;
display: inline-block;
}


.page-bar li:first-child > a {
margin-left: 0;
}


.page-bar a {
border: 1px solid #ddd;
text-decoration: none;
position: relative;
float: left;
padding: 6px 12px;
line-height: 1.42857143;
color: #337ab7;
cursor: pointer;
}


.page-bar a:hover {
background-color: #eee;
}


.page-bar .active a {
color: #fff;
cursor: default;
background-color: #1e7aca;
border-color: #1e7aca;
}


.page-bar i {
font-style: normal;
color: #1e7aca;
margin: 0 4px;
font-size: 12px;
}

index.html:

<table class="table table-bordered table-hover "id="ggztable" v-show="isAddSpecifications">
  <thead>
  <tr>
  <th>规格值</th>
  <th>操作</th>
  </tr>
  </thead>
  <tbody>
  <tr v-for="(item,nn) in limitTemps">
  <td>{{item.value}}</td>
  <td>
  <img src='../img/common_edit@25.png' data-toggle="modal"
   data-target="#editSonModal" @click="editSonModal(item,nn)" alt='修改'>
  <img src='../img/common_del@25.png' data-toggle="modal"
   data-target="#delSonModal" @click="delSonModal(nn)" alt='删除'>
  </td>
  </tr>
  </tbody>
  </table>
<vue-pagination :cur="specificationValCur":all="specificationValAll":info="specificationValInfo" :showpages="specificationValShowpages":selected="specificationValselected"
 v-on:mypage="getPage" v-on:pageschange="getspecificationValShowPages">

</vue-pagination>

index.js

/**
 * Created by komi on 2017-03-05 0005.
 */



var vm = new Vue({
 el: ".main",
 data: {
  specificationValCur: 1,//当前页
  specificationValAll: 1,//总页数
  specificationValselected: 10,//默认每页显示的页数
  specificationValTotalRecond: 1,//总记录数
  specificationValShowpages: [10, 30, 50, 100], //每页显示的页数
  specificationValInfo: "",
  limitTemps: [],
  temps:[]//数据源
 },
 watch: {
  temps: "setPage"
 },
 components: {
  'vue-pagination': Pagination
 },
 methods: {
  setPage: function () {
   this.specificationValInfo = "记录数为:" + this.temps.length + "条";
   this.specificationValTotalRecond = this.temps.length;
   this.setPageBtn();
   this.setPageLimit(this.specificationValTotalRecond,this.specificationValselected,1)
  },
  getPage:function (msg) {
   this.specificationValCur=msg;//这里必须,否则按钮无法高亮
   this.setPageLimit(this.specificationValTotalRecond,this.specificationValselected,msg)
  },
  setPageLimit: function (total,select,cur) {//这里为实现分页切换table的主要实现
   if(total<=select){
    this.limitTemps=this.temps;
    return
   }else {
    var arr = [];
    var a=select*(cur-1);
    var b=select*cur;
    for (var i = a; i < b; i++) {
     if(typeof(this.temps[i])!="undefined"){
      arr[i - a] = this.temps[i]
     }
    }
    this.limitTemps = arr;
   }
   console.log("total:"+total+"select"+select+"cur"+cur)
  },
  setPageBtn: function () {
   if (this.specificationValTotalRecond > this.specificationValselected) {
    if (this.specificationValTotalRecond % this.specificationValselected == 0) {
     this.specificationValAll = this.specificationValTotalRecond / this.specificationValselected
    } else {
     this.specificationValAll = parseInt(this.specificationValTotalRecond / this.specificationValselected) + 1
    }
   } else {
    this.specificationValAll = 1
   }
  },
  getspecificationValShowPages: function (pages) {
   this.specificationValselected = pages;
   this.setPageBtn();
   this.setPageLimit(this.specificationValTotalRecond,this.specificationValselected,1)
  }
 }
});

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

Javascript 相关文章推荐
JQuery上传插件Uploadify使用详解及错误处理
Apr 27 Javascript
jQuery源码分析之Event事件分析
Jun 07 Javascript
JavaScript学习笔记(一) js基本语法
Oct 25 Javascript
js FLASH幻灯片字符串中有连接符&的处理方法
Mar 01 Javascript
javascript中将Object转换为String函数代码 (json str)
Apr 29 Javascript
javascript真的不难-回顾一下基础知识
Jan 15 Javascript
jQuery实用基础超详细介绍
Apr 11 Javascript
JavaScript中获取时间的函数集
Aug 16 Javascript
Javascript中字符串和数字的操作方法整理
Jan 22 Javascript
jQuery使用zTree插件实现可拖拽的树示例
Sep 23 jQuery
微信小程序多音频播放进度条问题
Aug 28 Javascript
使用vue2.6实现抖音【时间轮盘】屏保效果附源码
Apr 24 Javascript
详解Weex基于Vue2.0开发模板搭建
Mar 20 #Javascript
基于vue.js实现侧边菜单栏
Mar 20 #Javascript
微信小程序 参数传递实例代码
Mar 20 #Javascript
vue.js指令v-model使用方法
Mar 20 #Javascript
微信小程序中子页面向父页面传值实例详解
Mar 20 #Javascript
JS查找英文文章中出现频率最高的单词
Mar 20 #Javascript
vue.js中指令Directives详解
Mar 20 #Javascript
You might like
玛琪朵 Macchiato
2021/03/03 咖啡文化
关于查看MSSQL 数据库 用户每个表 占用的空间大小
2013/06/21 PHP
laravel安装和配置教程
2014/10/29 PHP
PHP使用array_multisort对多个数组或多维数组进行排序
2014/12/16 PHP
php-msf源码详解
2017/12/25 PHP
Javascript实例教程(19) 使用HoTMetal(1)
2006/12/23 Javascript
javascript 去字符串空格终极版(支持utf8)
2009/11/14 Javascript
js 兼容多浏览器的回车和鼠标焦点事件代码(IE6/7/8,firefox,chrome)
2010/04/14 Javascript
location.href 在IE6中不跳转的解决方法与推荐使用代码
2010/07/08 Javascript
jquery二级导航内容均分的原理及实现
2013/08/13 Javascript
随鼠标移动的时钟非常漂亮遗憾的是只支持IE
2014/08/12 Javascript
Javascript前端UI框架Kit使用指南之Kitjs简介
2014/11/28 Javascript
理解javascript函数式编程中的闭包(closure)
2016/03/08 Javascript
快速解决jquery.touchSwipe左右滑动和垂直滚动条冲突
2016/04/15 Javascript
AngularJS基础 ng-dblclick 指令用法
2016/08/01 Javascript
原生JS实现图片轮播与淡入效果的简单实例
2016/08/21 Javascript
Javascript 动态改变imput type属性
2016/11/01 Javascript
JS克隆,属性,数组,对象,函数实例分析
2016/11/26 Javascript
Bootstrap常用组件学习(整理)
2017/03/24 Javascript
微信小程序顶部可滚动导航效果
2017/10/31 Javascript
Cocos2d实现刮刮卡效果
2018/12/20 Javascript
微信小程序开发之左右分栏效果的实例代码
2019/05/20 Javascript
js实现自定义右键菜单
2020/05/18 Javascript
jQuery实现视频展示效果
2020/05/30 jQuery
python小技巧之批量抓取美女图片
2014/06/06 Python
python中将\\uxxxx转换为Unicode字符串的方法
2018/09/06 Python
CentOS下Python3的安装及创建虚拟环境的方法
2018/11/28 Python
Pycharm连接远程服务器并实现远程调试的实现
2019/08/02 Python
丝芙兰中国官方商城:SEPHORA中国
2018/01/10 全球购物
会计应聘求职信范文
2013/12/17 职场文书
买卖车协议书
2014/04/21 职场文书
比赛口号大全
2014/06/10 职场文书
车辆工程专业求职信
2014/06/14 职场文书
乡镇干部个人整改措施思想汇报
2014/10/10 职场文书
个人年度总结报告
2015/03/09 职场文书
2015年英语教学工作总结
2015/05/25 职场文书