基于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与css打造个性化的单选框和复选框
Oct 20 Javascript
jquery删除指定的html标签并保留标签内文本内容的方法
Apr 02 Javascript
AngularJs入门教程之环境搭建+创建应用示例
Nov 01 Javascript
Vue官方文档梳理之全局配置
Nov 22 Javascript
js实现二级菜单点击显示当前内容效果
Apr 28 Javascript
vue实现pdf导出解决生成canvas模糊等问题(推荐)
Oct 18 Javascript
微信小程序车牌号码模拟键盘输入功能的实现代码
Nov 11 Javascript
微信小程序实现张图片合成为一张并下载
Jul 16 Javascript
vue中created和mounted的区别浅析
Aug 13 Javascript
layui动态表头的实现代码
Aug 22 Javascript
vue中axios防止多次触发终止多次请求的示例代码(防抖)
Feb 16 Javascript
微信小程序实现轮播图指示器
Jun 25 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
关于PHP自动判断字符集并转码的详解
2013/06/26 PHP
php正则提取html图片(img)src地址与任意属性的方法
2017/02/08 PHP
PHP用函数嵌入网站访问量计数器
2017/10/27 PHP
php利用ZipArchive类操作文件的实例
2020/01/21 PHP
飞鱼(shqlsl) javascript作品集
2006/12/16 Javascript
用javascript作一个通用向导说明
2011/08/30 Javascript
JS刷新框架外页面七种实现代码
2013/02/18 Javascript
For循环中分号隔开的3部分的执行顺序探讨
2014/05/27 Javascript
jQuery队列操作方法实例
2014/06/11 Javascript
js实现的四级左侧网站分类菜单实例
2015/05/06 Javascript
使用Sticky组件实现带sticky效果的tab导航和滚动导航的方法
2016/03/22 Javascript
js 获取经纬度的实现方法
2016/06/20 Javascript
基于MVC5和Bootstrap的jQuery TreeView树形控件(一)之数据支持json字符串、list集合
2016/08/11 Javascript
基于JavaScript实现拖动滑块效果
2017/02/16 Javascript
浅谈Angular2 模块懒加载的方法
2017/10/04 Javascript
VUE单页面切换动画代码(全网最好的切换效果)
2019/10/31 Javascript
Vue $attrs &amp; inheritAttr实现button禁用效果案例
2020/12/07 Vue.js
Python中shutil模块的常用文件操作函数用法示例
2016/07/05 Python
Python实现获取命令行输出结果的方法
2017/06/10 Python
对Python 两大环境管理神器 pyenv 和 virtualenv详解
2018/12/31 Python
Python读写文件基础知识点
2019/06/10 Python
Python assert语句的简单使用示例
2019/07/28 Python
windows下Python安装、使用教程和Notepad++的使用教程
2019/10/06 Python
Python切片列表字符串如何实现切换
2020/08/06 Python
英国浴室洗脸盆购物网站:Click Basin
2018/06/08 全球购物
世界领先的电子书网站:eBooks.com(在线购买小说、非小说和教科书)
2019/03/30 全球购物
美体小铺印度官网:The Body Shop印度
2019/10/17 全球购物
医科大学生毕业的自我评价分享
2013/11/12 职场文书
大课间体育活动方案
2014/03/12 职场文书
2014年党课学习材料
2014/05/11 职场文书
2014年幼儿园学期工作总结
2014/12/05 职场文书
民事起诉状范文
2015/05/19 职场文书
校园文化艺术节开幕词
2016/03/04 职场文书
诉讼和解协议书
2016/03/23 职场文书
深入理解python多线程编程
2021/04/18 Python
拒绝盗图!教你怎么用python给图片加水印
2021/06/04 Python