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 相关文章推荐
lib.utf.js
Aug 21 Javascript
javascript 学习之旅 (3)
Feb 05 Javascript
用jquery实现下拉菜单效果的代码
Jul 25 Javascript
js倒计时小程序
Nov 05 Javascript
php中给js数组赋值方法
Mar 10 Javascript
jQuery读取XML文件内容的方法
Mar 09 Javascript
json定义及jquery操作json的方法
Sep 29 Javascript
Bootstrap面板使用方法
Jan 16 Javascript
Vue.js组件tab实现选项卡切换
Mar 23 Javascript
基于vue、react实现倒计时效果
Aug 26 Javascript
vue实现侧边栏导航效果
Oct 21 Javascript
如何在vue中使用百度地图添加自定义覆盖物(水波纹)
Nov 03 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常用函数小技巧
2008/09/11 PHP
JavaScript与HTML结合的基本使用方法整理
2015/10/12 PHP
Yii数据模型中rules类验证器用法分析
2016/07/15 PHP
php插件Xajax使用方法详解
2017/08/31 PHP
初学Jquery插件制作 在SageCRM的查询屏幕隐藏部分行的功能
2011/12/26 Javascript
利用javascript判断文件是否存在
2013/12/31 Javascript
jQuery中size()方法用法实例
2014/12/27 Javascript
JS实现兼容性较好的随屏滚动效果
2015/11/09 Javascript
jQuery点击改变class并toggle及toggleClass()方法定义用法
2015/12/11 Javascript
JS中dom0级事件和dom2级事件的区别介绍
2016/05/05 Javascript
Backbone.js框架中Model与Collection的使用实例
2016/05/07 Javascript
JS实现复制内容到剪贴板功能
2017/02/05 Javascript
jQuery 判断元素整理汇总
2017/02/28 Javascript
JavaScript手风琴页面制作
2017/05/17 Javascript
JS学习笔记之数组去重实现方法小结
2019/05/29 Javascript
Vue搭建后台系统需要注意的问题
2019/11/08 Javascript
Vue2.0 ES6语法降级ES5的操作
2020/10/30 Javascript
[04:55]完美世界副总裁蔡玮:DOTA2的自由、公平与信任
2013/12/18 DOTA
python调用cmd命令行制作刷博器
2014/01/13 Python
python+pyqt实现右下角弹出框
2017/10/26 Python
Python获取当前函数名称方法实例分享
2018/01/18 Python
Python中反射和描述器总结
2018/09/23 Python
python无限生成不重复(字母,数字,字符)组合的方法
2018/12/04 Python
Python 控制终端输出文字的实例
2019/07/12 Python
Django 反向生成url实例详解
2019/07/30 Python
python使用matplotlib绘制雷达图
2019/10/18 Python
python中with用法讲解
2020/02/07 Python
Django Admin后台模型列表页面如何添加自定义操作按钮
2020/11/11 Python
用你熟悉的语言写一个连接ORACLE数据库的程序,能够完成修改和查询工作
2012/06/11 面试题
职业教育毕业生求职信
2013/11/09 职场文书
幼儿园春季开学寄语
2014/04/03 职场文书
企业宣传标语
2014/06/09 职场文书
员工培训协议书
2014/09/15 职场文书
2014教师党员自我评议总结
2014/09/19 职场文书
社会主义核心价值观主题教育活动总结
2015/05/07 职场文书