Vue Cli与BootStrap结合实现表格分页功能


Posted in Javascript onAugust 18, 2017

1、首先需要在vue-cli项目中配置bootstrap,jquery

2、 然后新建vue文件,如index.vue,index.vue内容如下:

3、配置路由即可运行实现。

<template>
  <div class="tTable container body-content">
    <div class="form-group">
      <div class="form-group">
        <div class="page-header">
          表格
        </div>
        <table class="table table-bordered table-responsive table-striped">
          <thead>
          <tr>
          <th>时间</th>
          <th>点击数</th>
          <th>点击数</th>
          </tr>
          </thead>
          <tbody>
          <tr v-for="item in arrayData">
            <td>{{item.timestamp}}</td>
            <td>{{item.count}}</td>
            <td>{{item.count}}</td>
          </tr>
          </tbody>
        </table>
        <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 value="10">10</option>
              <option value="20">20</option>
              <option value="30">30</option>
              <option value="40">40</option>
            </select>
          </span>
          <span v-for="item in pageCount+1">
            <span v-if="item==1" class="btn btn-default" v-on:click="showPage(1,$event)" :class="{'disabled':fDisabled}">
              首页
            </span>
            <span v-if="item==1" class="btn btn-default" v-on:click="showPage(pageCurrent-1,$event)" :class="{'disabled':fDisabled}">
              上一页
            </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" 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)" :class="{'disabled':lDisabled}">
              下一页
            </span>
            <span v-if="item==pageCount" class="btn btn-default" v-on:click="showPage(pageCount,$event)" :class="{'disabled':lDisabled}">
              尾页
            </span>
          </span>
          <span>{{pageCurrent}}/{{pageCount}}</span>
        </div>
      </div>
    </div>
  </div>
 </template>
 <script >
 export default {
  data(){
    return{
         //为第一页或者最后一页时,首页,尾页不能点击
        fDisabled:false,
        lDisabled:false,
         //总项目数
        totalCount: 200,
        //分页数
        pageCount: 20,
        //当前页面
        pageCurrent: 1,
        //分页大小
        pagesize: 10,
        //显示分页按钮数
        showPages: 11,
        //开始显示的分页按钮
        showPagesStart: 1,
        //结束显示的分页按钮
        showPageEnd: 100,
        //分页数据
        arrayData: []
    }
  },
  methods:{
    showPage(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 = [];
        var time=new Date();
        for (var i = 0; i < this.pagesize; i++) {
          newPageInfo[newPageInfo.length] = {
            timestamp: time,
            count: (i + (pageIndex - 1) * 20)
          };
        }
        this.pageCurrent = pageIndex;
        this.arrayData = newPageInfo;
        //如果当前页首页或者尾页,则上一页首页就不能点击,下一页尾页就不能点击
         if(this.pageCurrent===1){
            this.fDisabled=true;
          }else if(this.pageCurrent===this.pageCount){
            this.lDisabled=true;
          }else{
             this.fDisabled=false;
             this.lDisabled=false;
          }
        //计算分页按钮数据
        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;
          }
        }
        console.log("showPagesStart:" + this.showPagesStart + ",showPageEnd:" + this.showPageEnd + ",pageIndex:" + pageIndex);
      }
    }
  },
  mounted(){
    this.showPage(this.pageCurrent, null, true);
  },
  computed:{
  }
}
 </script>

总结

以上所述是小编给大家介绍的Vue Cli与BootStrap结合实现表格分页功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript toFixed() 方法
Apr 15 Javascript
javascript+xml实现简单图片轮换(只支持IE)
Dec 23 Javascript
javascript中不等于的代码是什么怎么写
Dec 29 Javascript
js showModalDialog参数的使用详解
Jan 07 Javascript
jQuery插件实现文字无缝向上滚动效果代码
Feb 25 Javascript
javascript用正则表达式过滤空格的实现代码
Jun 14 Javascript
Bootstrap实现登录校验表单(带验证码)
Jun 23 Javascript
jQuery ajaxForm()的应用
Oct 14 Javascript
Jquery给当前页或者跳转后页面的导航栏添加选中后样式的实例
Dec 08 Javascript
jQuery UI制作选项卡(tabs)
Dec 13 Javascript
详解使用vue脚手架工具搭建vue-webpack项目
May 10 Javascript
js+html获取系统当前时间
Nov 10 Javascript
解决微信二次分享不显示摘要和图片的问题
Aug 18 #Javascript
详谈innerHTML innerText的使用和区别
Aug 18 #Javascript
史上最全JavaScript常用的简写技巧(推荐)
Aug 17 #Javascript
webpack2.0配置postcss-loader的方法
Aug 17 #Javascript
微信小程序 获取javascript 里的数据
Aug 17 #Javascript
JavaScript全屏和退出全屏事件总结(附代码)
Aug 17 #Javascript
JavaScript代码判断输入的字符串是否含有特殊字符和表情代码实例
Aug 17 #Javascript
You might like
各种战术和打法的原创者
2020/03/04 星际争霸
php更改目录及子目录下所有的文件后缀扩展名的代码
2010/10/12 PHP
查找mysql字段中固定字符串并替换的几个方法
2012/09/23 PHP
PHP 读取Postgresql中的数组
2013/04/14 PHP
php实现信用卡校验位算法THE LUHN MOD-10示例
2014/05/07 PHP
PHP图像处理之imagecreate、imagedestroy函数介绍
2014/11/19 PHP
PHP中Memcache操作类及用法实例
2014/12/12 PHP
PHP实现简单爬虫的方法
2015/07/29 PHP
jQuery操作input值的各种方法总结
2013/11/21 Javascript
javascript制作loading动画效果 loading效果
2014/01/14 Javascript
jQuery实现手机号码输入提示功能实例
2015/04/30 Javascript
JavaScript类型系统之基本数据类型与包装类型
2016/01/06 Javascript
php 修改密码实现代码
2017/05/24 Javascript
javascript回调函数的概念理解与用法分析
2017/05/27 Javascript
微信小程序中button组件的边框设置的实例详解
2017/09/27 Javascript
解决vue组件中使用v-for出现告警问题及v for指令介绍
2017/11/11 Javascript
Vue.js 踩坑记之双向绑定
2018/05/03 Javascript
[01:15:36]加油刀塔第二期网络版
2014/08/09 DOTA
python判断端口是否打开的实现代码
2013/02/10 Python
python中Flask框架简单入门实例
2015/03/21 Python
浅谈python中的实例方法、类方法和静态方法
2017/02/17 Python
Python搭建HTTP服务器和FTP服务器
2017/03/09 Python
python开发利器之ulipad的使用实践
2017/03/16 Python
python调用Delphi写的Dll代码示例
2017/12/05 Python
Python装饰器用法实例总结
2018/02/07 Python
Django中提供的6种缓存方式详解
2019/08/05 Python
如何在python中实现线性回归
2020/08/10 Python
Python Map 函数的使用
2020/08/28 Python
python 实用工具状态机transitions
2020/11/21 Python
AmazeUI 图标的示例代码
2020/08/13 HTML / CSS
俄罗斯电动工具和设备购物网站:Vseinstrumenti.ru
2020/11/12 全球购物
我为自己代言广告词
2014/03/18 职场文书
我的教育故事演讲稿
2014/05/04 职场文书
单位授权委托书范本
2014/09/26 职场文书
师德师风个人整改措施
2014/10/27 职场文书
2015年暑期社会实践活动总结
2015/03/27 职场文书