基于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 相关文章推荐
为Yahoo! UI Extensions Grid增加内置的可编辑器
Mar 10 Javascript
基于jQuery的表格操作插件
Apr 22 Javascript
JavaScript 联动的无限级封装类,数据采用非Ajax方式,随意添加联动
Jun 29 Javascript
javascript实现的DES加密示例
Oct 30 Javascript
利用jQuery实现打字机字幕效果实例代码
Sep 02 Javascript
javascript显示系统当前时间代码
Dec 29 Javascript
js canvas实现放大镜查看图片功能
Jun 08 Javascript
jquery实现一个全局计时器(商城可用)
Jun 30 jQuery
Kindeditor单独调用多图上传实例
Jul 31 Javascript
JS实现select选中option触发事件操作示例
Jul 13 Javascript
ng-zorro-antd 入门初体验
Dec 03 Javascript
原生js实现可兼容PC和移动端的拖动滑块功能详解【测试可用】
Aug 15 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上传图片类(随机名,缩略图,加水印)
2010/06/30 PHP
JS中encodeURIComponent函数用php解码的代码
2012/03/01 PHP
yii上传文件或图片实例
2014/04/01 PHP
PHP 二维关联数组根据其中一个字段排序(推荐)
2017/04/04 PHP
PHP实现的下载远程文件类定义与用法示例
2017/07/05 PHP
javascript模仿msgbox提示效果代码
2008/06/10 Javascript
JavaScript DOM 学习第七章 表单的扩展
2010/02/19 Javascript
javascript静态页面传值的三种方法分享
2013/11/12 Javascript
JavaScript常用的返回,自动跳转,刷新,关闭语句汇总
2015/01/13 Javascript
一道常被人轻视的web前端常见面试题(JS)
2016/02/15 Javascript
原生JavaScript制作微博发布面板效果
2016/03/11 Javascript
jQuery技巧之让任何组件都支持类似DOM的事件管理
2016/04/05 Javascript
JavaScript中对JSON对象的基本操作示例
2016/05/21 Javascript
深入理解JQuery循环绑定事件
2016/06/02 Javascript
bootstrap模态框实现拖拽效果
2016/12/14 Javascript
Javascript实现信息滚动效果
2017/05/18 Javascript
Agularjs妙用双向数据绑定实现手风琴效果
2017/05/26 Javascript
微信小程序开发技巧汇总
2019/07/15 Javascript
微信小程序实现3D轮播图效果(非swiper组件)
2019/09/21 Javascript
JsonProperty 的使用方法详解
2019/10/11 Javascript
vue中进行微博分享的实例讲解
2019/10/14 Javascript
关于Vue中axios的封装实例详解
2019/10/20 Javascript
JavaScript数值类型知识汇总
2019/11/17 Javascript
JavaScript实现简易聊天对话框(加滚动条)
2020/02/10 Javascript
Vue 组件注册全解析
2020/12/17 Vue.js
python迭代器的使用方法实例
2013/11/21 Python
用Python抢过年的火车票附源码
2015/12/07 Python
pandas获取groupby分组里最大值所在的行方法
2018/04/20 Python
python实现逆序输出一个数字的示例讲解
2018/06/25 Python
python隐藏类中属性的3种实现方法
2019/12/19 Python
python 输出列表元素实例(以空格/逗号为分隔符)
2019/12/25 Python
大班幼儿评语大全
2014/04/30 职场文书
入党宣誓仪式主持词
2015/06/29 职场文书
学校运动会通讯稿
2015/07/18 职场文书
学生病假条怎么写
2015/08/17 职场文书
Python中的协程(Coroutine)操作模块(greenlet、gevent)
2022/05/30 Python