Vue.js如何结合bootstrap实现分页控件

发布时间:2021-06-30 14:31:03 作者:小新
来源:亿速云 阅读:186

这篇文章给大家分享的是有关Vue.js如何结合bootstrap实现分页控件的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

具体内容如下

效果如下

Vue.js如何结合bootstrap实现分页控件

Vue.js如何结合bootstrap实现分页控件

Vue.js如何结合bootstrap实现分页控件

实现代码:

<!DOCTYPE html> 
<html> 
<head> 
 <meta charset="utf-8" /> 
 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
 <title> Vue-PagerTest</title> 
 <link rel="stylesheet" href="/lib/bootstrap/dist/css/bootstrap.css" rel="external nofollow" /> 
</head> 
<body> 
 <div class="container body-content"> 
 <div id="test" class="form-group"> 
  <div class="form-group"> 
  <div class="page-header"> 
   数据 
  </div> 
  <table class="table table-bordered table-responsive table-striped"> 
   <tr> 
   <th>姓名</th> 
   <th>年龄</th> 
   <th>删除信息</th> 
   </tr> 
   <tr v-for="item in arrayData"> 
   <td class="text-center">{{item.name}}</td> 
   <td>{{item.age}}</td> 
   <td><a href="javascript:void(0)" rel="external nofollow" v-on:click="deleteItem($index,item.age)">del</a></td> 
   </tr> 
  </table> 
  <div class="page-header">分页</div> 
  <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> 
   <template v-for="item in pageCount+1"> 
   <span v-if="item==1" class="btn btn-default" v-on:click="showPage(1,$event)"> 
    首页 
   </span> 
   <span v-if="item==1" class="btn btn-default" v-on:click="showPage(pageCurrent-1,$event)"> 
    上一页 
   </span> 
   <span v-if="item==1" class="btn btn-default" v-on:click="showPage(item,$event)" v-bind:class="item==pageCurrent?'active':''"> 
    {{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)" <span > v-bind:class="item==pageCurrent?'active':''"</span><span >></span> 
    {{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)" <span >v-bind:class="item==pageCurrent?'active':''"</span><span >></span> 
    {{item}} 
   </span> 
   <span v-if="item==pageCount" class="btn btn-default" v-on:click="showPage(pageCurrent+1,$event)"> 
    下一页 
   </span> 
   <span v-if="item==pageCount" class="btn btn-default" v-on:click="showPage(pageCount,$event)"> 
    尾页 
   </span> 
   </template> 
   <span class="form-inline"> 
   <input class="pageIndex form-control"  type="text" v-model="pageCurrent | onlyNumeric" v-on:keyup.enter="showPage(pageCurrent,$event,true)" /> 
   </span> 
   <span>{{pageCurrent}}/{{pageCount}}</span> 
  </div> 
  </div> 
 </div> 
 <hr /> 
 <footer> 
  <p>&copy; 2016 - 笑问苍天丶</p> 
 </footer> 
 </div> 
 
 
 <script src="/lib/jquery/dist/jquery.js"></script> 
 <script src="/lib/bootstrap/dist/js/bootstrap.js"></script> 
 <script src="/lib/vue.js"></script> 
 <script> 
 //只能输入正整数过滤器 
 Vue.filter('onlyNumeric', { 
  // model -> view 
  // 在更新 `<input>` 元素之前格式化值 
  read: function (val) { 
  return val; 
  }, 
  // view -> model 
  // 在写回数据之前格式化值 
  write: function (val, oldVal) { 
  var number = +val.replace(/[^\d]/g, '') 
  return isNaN(number) ? 1 : parseFloat(number.toFixed(2)) 
  } 
 }) 
 
 //数组删除某项功能 
 Array.prototype.remove = function (dx) { 
  if (isNaN(dx) || dx > this.length) { return false; } 
  for (var i = 0, n = 0; i < this.length; i++) { 
  if (this[i] != this[dx]) { 
   this[n++] = this[i] 
  } 
  } 
  this.length -= 1 
 } 
 
 var vue = new Vue({ 
  el: "#test", 
  data: { 
  //总项目数 
  totalCount: 200, 
  //分页数 
  pageCount: 20, 
  //当前页面 
  pageCurrent: 1, 
  //分页大小 
  pagesize: 10, 
  //显示分页按钮数 
  showPages: 11, 
  //开始显示的分页按钮 
  showPagesStart: 1, 
  //结束显示的分页按钮 
  showPageEnd: 100, 
  //分页数据 
  arrayData: [] 
  }, 
  methods: { 
  //分页方法 
  showPage: function (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 newPageInfo = []; 
   for (var i = 0; i < this.pagesize; i++) { 
    newPageInfo[newPageInfo.length] = { 
    name: "test" + (i + (pageIndex - 1) * 20), 
    age: (i + (pageIndex - 1) * 20) 
    }; 
   } 
   this.pageCurrent = pageIndex; 
   this.arrayData = newPageInfo; 
 
   //计算分页按钮数据 
   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); 
   } 
 
  } 
  , deleteItem: function (index, age) { 
   if (confirm('确定要删除吗')) { 
   //console.log(index, age); 
 
   var newArray = []; 
   for (var i = 0; i < this.arrayData.length; i++) { 
    if (i != index) { 
    newArray[newArray.length] = this.arrayData[i]; 
    } 
   } 
   this.arrayData = newArray; 
   } 
  } 
  } 
 }); 
 vue.$watch("arrayData", function (value) { 
  //console.log("==============arrayData begin=============="); 
  //console.log(value==vue.arrayData); 
  //console.log(vue.arrayData); 
  //console.log("==============arrayData end=============="); 
 }); 
 vue.showPage(vue.pageCurrent, null, true); 
 </script> 
</body> 
</html>

感谢各位的阅读!关于“Vue.js如何结合bootstrap实现分页控件”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!

推荐阅读:
  1. bootstrap如何实现分页
  2. 怎么在Vue.js中使用bootstrap实现分页和排序

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

vue.js bootstrap

上一篇:PHP中怎么计算两个日期相差的天数

下一篇:php中怎么利用Laravel 实现自动化部署

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》