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

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

程序员文章站 2022-06-20 23:30:18
本文为大家分享了使用vue.js结合bootstrap 开发的分页控件,供大家参考,具体内容如下 效果如下 实现代码: <...

本文为大家分享了使用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 style="font-family: arial, helvetica, sans-serif;"> v-bind:class="item==pagecurrent?'active':''"</span><span style="font-family: arial, helvetica, sans-serif;">></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 style="font-family: arial, helvetica, sans-serif;">v-bind:class="item==pagecurrent?'active':''"</span><span style="font-family: arial, helvetica, sans-serif;">></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" style="width:60px;text-align:center" 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>© 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官网

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。