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 相关文章推荐
简单通用的JS滑动门代码
Dec 19 Javascript
javascript 避免闭包引发的问题
Mar 17 Javascript
基于JavaScript自定义构造函数的详解说明
Apr 24 Javascript
JS+css 图片自动缩放自适应大小
Aug 08 Javascript
jquery插件lazyload.js延迟加载图片的使用方法
Feb 19 Javascript
通过$(this)使用jQuery包装后的方法或属性
May 18 Javascript
javascript比较语义化版本号的实现代码
Sep 09 Javascript
Angularjs中controller的三种写法分享
Sep 21 Javascript
详解Vue中添加过渡效果
Mar 20 Javascript
vue.js移动端tab组件的封装实践实例
Jun 30 Javascript
详解js跨域请求的两种方式,支持post请求
May 05 Javascript
js实现单元格拖拽效果
Feb 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
PHP新手上路(十三)
2006/10/09 PHP
用 Composer构建自己的 PHP 框架之构建路由
2014/10/30 PHP
php程序内部post数据的方法
2015/03/31 PHP
golang 调用 php7详解及实例
2017/01/04 PHP
JS+PHP实现用户输入数字后显示最大的值及所在位置
2017/06/19 PHP
PHP实现的无限分类类库定义与用法示例【基于thinkPHP】
2018/08/06 PHP
Laravel Eloquent ORM 多条件查询的例子
2019/10/10 PHP
Jquery数独游戏解析(一)-页面布局
2010/11/05 Javascript
node.js不得不说的12点内容
2014/07/14 Javascript
jQuery实现感应鼠标动画效果自动伸长的输入框实例
2015/02/24 Javascript
jQuery实现在textarea指定位置插入字符或表情的方法
2015/03/11 Javascript
浅析Node.js中使用依赖注入的相关问题及解决方法
2015/06/24 Javascript
jQuery实现带有洗牌效果的动画分页实例
2015/08/31 Javascript
jQuery中each()、find()和filter()等节点操作方法详解(推荐)
2016/05/25 Javascript
JS递归遍历对象获得Value值方法技巧
2016/06/14 Javascript
JavaScript对象数组如何按指定属性和排序方向进行排序
2016/06/15 Javascript
JS作为值的函数用法示例
2016/06/20 Javascript
jquery插件bootstrapValidator表单验证详解
2016/12/15 Javascript
jQuery制作input提示内容(兼容IE8以上)
2017/07/05 jQuery
Vue 组件(component)教程之实现精美的日历方法示例
2018/01/08 Javascript
快速搭建vue2.0+boostrap项目的方法
2018/04/09 Javascript
Vue 项目分环境打包的方法示例
2018/08/03 Javascript
vue.js实现带日期星期的数字时钟功能示例
2018/08/28 Javascript
vue中解决拖拽改变存在iframe的div大小时卡顿问题
2020/07/22 Javascript
JavaScript实现HTML导航栏下拉菜单
2020/11/25 Javascript
[58:15]2018DOTA2亚洲邀请赛 4.1 小组赛 A组 NB vs Liquid
2018/04/02 DOTA
python通过正则查找微博@(at)用户的方法
2015/03/13 Python
Python实现字符串与数组相互转换功能示例
2017/09/22 Python
浅析Python 中几种字符串格式化方法及其比较
2019/07/02 Python
Django数据库迁移常见使用方法
2020/11/12 Python
BannerBuzz加拿大:在线定制横幅印刷、广告和标志
2020/03/10 全球购物
天游软件面试
2013/11/23 面试题
产品促销活动策划书
2014/01/15 职场文书
同学聚会老师邀请函
2014/01/28 职场文书
vue报错function () { [native code] },无法出现我们想要的内容 Unknown custom element
2022/04/11 Vue.js
PostgreSQL基于pgrouting的路径规划处理方法
2022/04/18 PostgreSQL