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


Posted in Javascript onMarch 10, 2017

本文为大家分享了使用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>

源码下载: bootstrap分页控件

参考资料: Vue.js官网

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

Javascript 相关文章推荐
图片格式的JavaScript和CSS速查手册
Aug 20 Javascript
JQuery实现用户名无刷新验证的小例子
Mar 22 Javascript
下拉框select的绑定示例
Sep 04 Javascript
IScroll5 中文API参数说明和调用方法
May 21 Javascript
详解AngularJs中$sce与$sceDelegate上下文转义服务
Sep 21 Javascript
jquery操作checkbox火狐下第二次无法勾选的解决方法
Oct 10 Javascript
jQuery实现模拟flash头像裁切上传功能示例
Dec 11 Javascript
Angular 2父子组件数据传递之@Input和@Output详解(下)
Jul 05 Javascript
JS简单实现查看文档创建日期、修改日期和文档大小的方法示例
Apr 08 Javascript
Vue中Axios从远程/后台读取数据
Jan 21 Javascript
Vee-validate 父组件获取子组件表单校验结果的实例代码
May 20 Javascript
Node.js系列之安装配置与基本使用(1)
Aug 30 Javascript
js获取ip和地区
Mar 10 #Javascript
Vue.js bootstrap前端实现分页和排序
Mar 10 #Javascript
JavaScript组件开发之输入框加候选框
Mar 10 #Javascript
原生javascript移动端滑动banner效果
Mar 10 #Javascript
jQuery弹出窗口简单实现代码
Mar 09 #Javascript
JavaScript实现弹窗效果代码分析
Mar 09 #Javascript
详解Vue方法与事件
Mar 09 #Javascript
You might like
PHP中防止直接访问或查看或下载config.php文件的方法
2012/07/07 PHP
php调用dll的实例操作动画与代码分享
2012/08/14 PHP
php获得用户ip地址的比较不错的方法
2014/02/08 PHP
Laravel如何实现适合Api的异常处理响应格式
2020/06/14 PHP
用CSS+JS实现的进度条效果效果
2007/06/05 Javascript
JavaScript入门教程(9) Document文档对象
2009/01/31 Javascript
Dom 是什么的详细说明
2010/10/25 Javascript
javaScript使用EL表达式的几种方式
2014/05/27 Javascript
jquery统计用户选中的复选框的个数
2014/06/06 Javascript
javaScript中push函数用法实例分析
2015/06/08 Javascript
javascript实现二级级联菜单的简单制作
2015/11/19 Javascript
JS弹出对话框实现方法(三种方式)
2015/12/18 Javascript
jQuery动态生成不规则表格(前后端)
2017/02/21 Javascript
浅谈pc端rem字体设置的问题
2017/08/03 Javascript
微信小程序 按钮滑动的实现方法
2017/09/27 Javascript
Postman的下载及安装教程详解
2018/10/16 Javascript
详解Vue+ElementUI从零开始搭建自己的网站(一、环境搭建)
2019/04/30 Javascript
解决vue-cli@3.xx安装不成功的问题及搭建ts-vue项目
2020/02/09 Javascript
JS实现网页时钟特效
2020/03/25 Javascript
Python中使用中文的方法
2011/02/19 Python
Python爬取Coursera课程资源的详细过程
2014/11/04 Python
Python functools模块学习总结
2015/05/09 Python
由Python编写的MySQL管理工具代码实例
2019/04/09 Python
kafka-python 获取topic lag值方式
2019/12/23 Python
Python编程快速上手——正则表达式查找功能案例分析
2020/02/28 Python
python实现最短路径的实例方法
2020/07/19 Python
html5 Canvas画图教程(8)—canvas里画曲线之bezierCurveTo方法
2013/01/09 HTML / CSS
One.com挪威:北欧成长最快的网络托管公司
2016/11/19 全球购物
美国单身专业人士在线约会网站:EliteSingles
2019/03/19 全球购物
西班牙购买行李箱和背包网站:Maletas Greenwich
2019/10/08 全球购物
Overload和Override的区别。Overloaded的方法是否可以改变返回值的类型
2013/10/30 面试题
新驾驶员个人自我评价
2014/01/03 职场文书
大客户经理岗位职责
2015/04/09 职场文书
驳回起诉裁定书
2015/05/19 职场文书
纪委立案决定书
2015/06/24 职场文书
在Python中如何使用yield
2021/06/07 Python