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 相关文章推荐
jQuery 1.2.x 升? 1.3.x 注意事项
May 06 Javascript
js显示文本框提示文字的方法
May 07 Javascript
浅析Node.js的Stream模块中的Readable对象
Jul 29 Javascript
json格式数据的添加,删除及排序方法
Jan 21 Javascript
JavaScript编程学习技巧汇总
Feb 21 Javascript
微信小程序 wx.request(接口调用方式)详解及实例
Nov 23 Javascript
node.js报错:Cannot find module 'ejs'的解决办法
Dec 14 Javascript
解决jquery appaend元素中id绑定事件失效的问题
Sep 12 jQuery
vue 右键菜单插件 简单、可扩展、样式自定义的右键菜单
Nov 29 Javascript
Flutter 超实用简单菜单弹出框 PopupMenuButton功能
Aug 06 Javascript
JS严格模式原理与用法实例分析
Apr 27 Javascript
uni-app从安装到卸载的入门教程
May 15 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中计算中文字符串长度、截取中文字符串的函数代码
2011/08/09 PHP
PHP fastcgi模式上传大文件(大约有300多K)报错
2014/09/28 PHP
PHP中使用xmlreader读取xml数据示例
2014/12/29 PHP
php+mysql删除指定编号员工信息的方法
2015/01/14 PHP
使用Java实现简单的server/client回显功能的方法介绍
2013/05/03 Javascript
一个获取第n个元素节点的js函数
2014/09/02 Javascript
Javascript的闭包详解
2014/12/26 Javascript
javascript中in运算符用法分析
2015/04/28 Javascript
在JavaScript中处理字符串之fontcolor()方法的使用
2015/06/08 Javascript
PHP+jQuery+Ajax+Mysql如何实现发表心情功能
2015/08/06 Javascript
javascript实现别踩白块儿小游戏程序
2015/11/22 Javascript
js中通过getElementsByName访问name集合对象的方法
2016/10/31 Javascript
JavaScript表单验证开发
2016/11/23 Javascript
简单实现node.js图片上传
2016/12/18 Javascript
jQuery插件HighCharts绘制2D柱状图、折线图的组合双轴图效果示例【附demo源码下载】
2017/03/09 Javascript
借助node实战JSONP跨域实例
2017/03/30 Javascript
javascript+html5+css3自定义弹出窗口效果
2017/10/26 Javascript
JS+CSS实现滚动数字时钟效果
2017/12/25 Javascript
Vue 组件(component)教程之实现精美的日历方法示例
2018/01/08 Javascript
Vue配置marked链接添加target=&quot;_blank&quot;的方法
2019/07/19 Javascript
[43:51]2014 DOTA2国际邀请赛中国区预选赛 Dream Times VS TongFu
2014/05/22 DOTA
Python实现的使用telnet登陆聊天室实例
2015/06/17 Python
教你用python3根据关键词爬取百度百科的内容
2016/08/18 Python
python实现函数极小值
2019/07/10 Python
DJANGO-URL反向解析REVERSE实例讲解
2019/10/25 Python
解决django框架model中外键不落实到数据库问题
2020/05/20 Python
生物医学工程专业学生求职信范文分享
2013/12/14 职场文书
有关打架的检讨书
2014/01/25 职场文书
技术负责人任命书
2014/06/05 职场文书
电大奖学金获奖感言
2014/08/14 职场文书
作风转变心得体会
2014/09/02 职场文书
时尚女魔头观后感
2015/06/04 职场文书
羊脂球读书笔记
2015/06/30 职场文书
大学学生会竞选稿
2015/11/19 职场文书
Python OpenCV实现传统图片格式与base64转换
2021/06/13 Python
Java网络编程之UDP实现原理解析
2021/09/04 Java/Android