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结合实现表格分页功能,希望对大家有所帮助
推荐阅读
-
Vue.js结合bootstrap实现分页控件
-
Vue.js实现无限加载与分页功能开发
-
Vue.js实现多条件筛选、搜索、排序及分页的表格功能
-
require.js与bootstrap结合实现简单的页面登录和页面跳转功能
-
AngularJS 与Bootstrap实现表格分页实例代码
-
vue-cli结合Element-ui基于cropper.js封装vue实现图片裁剪组件功能
-
Vue.js结合bootstrap前端实现分页和排序效果
-
Angular.js与Bootstrap相结合实现表格分页代码
-
vue实现form表单与table表格的数据关联功能示例
-
Vue Cli与BootStrap结合实现表格分页功能