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 - HTML的request类
Jul 15 Javascript
javascript 获取函数形参个数
Jul 31 Javascript
js实现ArrayList功能附实例代码
Oct 29 Javascript
JS获取网页图片name属性的方法
Apr 01 Javascript
AngularJS bootstrap启动详解及实例代码
Sep 14 Javascript
BootStrap CSS全局样式和表格样式源码解析
Jan 20 Javascript
js仿微信公众平台打标签功能
Apr 08 Javascript
微信JSSDK调用微信扫一扫功能的方法
Jul 25 Javascript
jQuery niceScroll滚动条错位问题的解决方法
Feb 03 jQuery
使用vue-cli webpack 快速搭建项目的代码
Nov 21 Javascript
React 实现拖拽功能的示例代码
Jan 06 Javascript
纯javascript实现选择框的全选与反选功能
Apr 08 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/12/08 PHP
PHP抓屏函数实现屏幕快照代码分享
2014/01/02 PHP
phalcon框架使用指南
2016/02/23 PHP
数理公式,也可以这么唯美
2021/03/10 无线电
jQuery中 noConflict() 方法使用
2013/04/25 Javascript
认识Knockout及如何使用Knockout绑定上下文
2015/12/25 Javascript
解决JS无法调用Controller问题的方法
2015/12/31 Javascript
改变checkbox默认选中状态及取值的实现代码
2016/05/26 Javascript
jQuery EasyUI Panel面板组件使用详解
2017/02/28 Javascript
Vue+Flask实现简单的登录验证跳转的示例代码
2018/01/13 Javascript
微信小程序入口场景的问题集合与相关解决方法
2019/06/26 Javascript
js实现带搜索功能的下拉框
2020/01/11 Javascript
python读写ini文件示例(python读写文件)
2014/03/25 Python
Python中使用partial改变方法默认参数实例
2015/04/28 Python
python中as用法实例分析
2015/04/30 Python
Python 修改列表中的元素方法
2018/06/26 Python
PyCharm设置每行最大长度限制的方法
2019/01/16 Python
python使用KNN算法识别手写数字
2019/04/25 Python
Django的性能优化实现解析
2019/07/30 Python
Python 面向对象之封装、继承、多态操作实例分析
2019/11/21 Python
python3用PyPDF2解析pdf文件,用正则匹配数据方式
2020/05/12 Python
基于python纯函数实现井字棋游戏
2020/05/27 Python
python语言是免费还是收费的?
2020/06/15 Python
css3新单位vw、vh的使用教程
2018/03/23 HTML / CSS
香港网上花店:FlowerAdvisor香港
2019/05/30 全球购物
什么是java序列化,如何实现java序列化
2012/11/14 面试题
为什么group by 和order by会使查询变慢
2014/05/16 面试题
一份报关员的职业规划范文
2014/01/08 职场文书
绩效管理实施方案
2014/03/19 职场文书
美化环境标语
2014/06/20 职场文书
电子信息工程专业求职信
2014/06/28 职场文书
高中综合实践活动总结
2014/07/07 职场文书
教师自我剖析材料
2014/09/29 职场文书
行政主管岗位职责
2015/02/03 职场文书
PySwarms(Python粒子群优化工具包)的使用:GlobalBestPSO例子解析
2021/04/05 Python
HTML静态页面获取url参数和UserAgent的实现
2022/08/05 HTML / CSS