欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-05-14 19:13:56
1、首先需要在vue-cli项目中配置bootstrap,jquery 2、 然后新建vue文件,如index.vue,index.vue内容如下: 3、配置路由即可运...

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结合实现表格分页功能,希望对大家有所帮助