Vue组件BootPage实现简单的分页功能


Posted in Javascript onSeptember 12, 2016

有一段时间没更新文章了,主要是因为自己一直在忙着学习新的东西而忘记分享了,实在惭愧。 

这不,大半夜发文更一篇文章,分享一个自己编写的一个Vue的小组件,名叫BootPage。 

不了解Vue.js的童鞋可以移步我的上一篇文章《浅谈Vue.js》了解一下。 

BootPage组件简介 

其实也不是啥高大上的组件了,相反确实一个简单的表格分页组件而已,主要是自己最近项目中需要一个表格分页组件,而Vue官方组件库里分页组件都功能太强大或者没有适合我的,所以就自己写了一个凑合着用,或许有人和我一样需要这样一个简单的分页组件来实现简单的分页功能,我便在这里分享一下,大家自觉填坑咯。 

如需高大上的组件,可以移步Vue官方组件库:https://github.com/vuejs/awesome-vue#libraries--plugins 

BootPage是一款支持静态数据和服务器数据的表格分页组件,支持调整每页显示行数和页码显示个数,样式基于bootstrap,就像这样: 

Vue组件BootPage实现简单的分页功能

 在线演示:https://luozhihao.github.io/B... 

使用方法 

在.vue的组件文件中我们这样写template,即html代码: 

<table class="table table-hover table-bordered">
 <thead>
  <tr>
  <th width="10%">id</th>
  <th width="30%">name</th>
  <th width="40%">content</th>
  <th width="20%">remark</th>
  </tr>
 </thead>
 <tbody>
  <tr v-for="data in tableList">
  <td v-text="data.num"></td>
  <td v-text="data.author"></td>
  <td v-text="data.contents"></td>
  <td v-text="data.remark"></td>
  </tr>
 </tbody>
 <tfoot>
  <tr>
  <td colspan="4">
   <div class="pull-left">
   <button class="btn btn-default" v-on:click="refresh">刷新</button>
   </div>
   <div class="pull-right">
   <boot-page :async="false" :data="lists" :lens="lenArr" :page-len="pageLen" :param="param"></boot-page>
   </div>
  </td>
  </tr>
 </tfoot>
</table>

<boot-page>标签中async指是否从服务器端获取数据,false为否;data为静态的表格数据数组;lens为每页显示行数的数组;page-len为可显示的页码数;

使用静态数据的javascript代码即script标签内的内容如下: 

<script>
 import bootPage from './components/BootPage.vue'

 export default {
  data () {
  return {
   lenArr: [10, 50, 100], // 每页显示长度设置
   pageLen: 5, // 可显示的分页数
   lists: [
   {num: 1, author: 'luozh', contents: 'BootPage是一款支持静态数据和服务器数据的表格分页组件', remark: 'dsds'},
   {num: 2, author: 'luozh', contents: '支持调整每页显示行数和页码显示个数,样式基于bootstrap', remark: 'dsds'},
   {num: 3, author: 'luozh', contents: '<boot-page>标签中async指是否从服务器端获取数据,false为否', remark: 'dsds'},
   {num: 4, author: 'luozh', contents: 'data为静态的表格数据数组;', remark: 'dsds'},
   {num: 5, author: 'luozh', contents: 'lens为每页显示行数的数组', remark: 'dsds'},
   {num: 6, author: 'luozh', contents: 'page-len为可显示的页码数', remark: 'dsds'},
   {num: 7, author: 'luozh', contents: '服务器回传参数为{data:[], page_num: 6}, 其中data为表格数据,page_num为总页数', remark: 'dsds'},
   {num: 8, author: 'luozh', contents: '可以调用this.$refs.page.refresh()刷新表格数据', remark: 'dsds'}
   ], // 表格原始数据,使用服务器数据时无需使用
   tableList: [] // 分页组件传回的分页后数据
  }
  },
  components: {
  bootPage
  },
  events: {

  // 分页组件传回的表格数据
  'data' (data) {
   this.tableList = data
  }
  }
 }
</script>

一般我们很少使用静态的表格数据,大多数应用的数据都是从服务器端获取的,所以这里提供了获取服务器分页数据的方法: 

使用服务器数据的组件HTML如下: 

<boot-page v-ref:page :async="true" :lens="lenArr" :url="url" :page-len="pageLen" :param="param"></boot-page>
其中url为服务器的请求地址;param为需要向服务器发送的参数对象; 

使用服务器数据javascript的代码如下: 

<script>
 import bootPage from './components/BootPage.vue'

 export default {
  data () {
  return {
   lenArr: [10, 50, 100], // 每页显示长度设置
   pageLen: 5, // 可显示的分页数
   url: '/bootpage/', // 请求路径
   param: {}, // 向服务器传递参数
   tableList: [] // 分页组件传回的分页后数据
  }
  },
  methods: {
  refresh () {
   this.$refs.page.refresh() // 这里提供了一个表格刷新功能
  }
  },
  components: {
  bootPage
  },
  events: {

  // 分页组件传回的表格数据(这里即为服务器传回的数据)
  'data' (data) {
   this.tableList = data
  },

  // 刷新数据
  'refresh' () {
   this.refresh()
  }
  }
 }
</script>

注:服务器除了传给组件表格的数组内容,还需一个总页数的键名,名为page_num 

组件自带向服务器传递的参数为: 

{
    active: 1, // 当前页码
    length: 5  // 每页显示个数
}

服务器回传的参数需为:

{
    data: [], // 表格数据
    page_num: 5  // 总页数
}
  

组件源码 

至于分页的实现源码这里的就不展示了,所有源码我都上传到了我的github,地址为:https://github.com/luozhihao/BootPage 

这里事先提个醒:因为这个组件是我用几个小时赶出来的,所以对于Vue组件的编写格式和规范肯定是考虑不周的,没有完全独立出来,所以自觉填坑咯,这里只作分享。 

当然你也可以随意的修改组件的代码来适合自己项目的使用,毕竟实现大而全的分页组件还是比较复杂的。

本文已被整理到了《Vue.js前端组件学习教程》,欢迎大家学习阅读。

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

Javascript 相关文章推荐
javascript之水平横向滚动歌词同步的应用
May 07 Javascript
jquery中对表单的基本操作代码
Jul 29 Javascript
JS常用字符串处理方法应用总结
May 22 Javascript
浅谈Javascript实现继承的方法
Jul 06 Javascript
浅谈js里面的InttoStr和StrtoInt
Jun 14 Javascript
在html中引入外部js文件,并调用带参函数的方法
Oct 31 Javascript
jQuery实现二维码扫描功能
Jan 09 Javascript
Javascript DOM事件操作小结(监听鼠标点击、释放,悬停、离开等)
Jan 20 Javascript
babel基本使用详解
Feb 17 Javascript
详解小程序循环require之坑
Mar 08 Javascript
小程序实现上下移动切换位置
Sep 23 Javascript
jQuery class属性操作addClass()与removeClass()、hasClass()、toggleClass()
Mar 31 jQuery
jQuery实现的多张图无缝滚动效果【测试可用】
Sep 12 #Javascript
初识简单却不失优雅的Vue.js
Sep 12 #Javascript
jQuery实现简单的tab标签页效果
Sep 12 #Javascript
深入探讨Vue.js组件和组件通信
Sep 12 #Javascript
前端框架Vue.js中Directive知识详解
Sep 12 #Javascript
前端框架Vue.js构建大型应用浅析
Sep 12 #Javascript
jQuery过滤选择器用法示例
Sep 12 #Javascript
You might like
php文件怎么打开 如何执行php文件
2011/12/21 PHP
php上传图片到指定位置路径保存到数据库的具体实现
2013/12/30 PHP
php实现mysql数据库分表分段备份
2015/06/18 PHP
Yii使用DeleteAll连表删除出现报错问题的解决方法
2016/07/14 PHP
php往mysql中批量插入数据实例教程
2018/12/12 PHP
laravel 解决ajax异步提交数据,并还回填充表格的问题
2019/10/15 PHP
用JavaScript事件串连执行多个处理过程的方法
2007/03/09 Javascript
JavaScript包装对象使用介绍
2013/08/29 Javascript
js switch case default 的用法示例介绍
2013/10/23 Javascript
Node.js编程中客户端Session的使用详解
2015/06/23 Javascript
jquery实现跳到底部,回到顶部效果的简单实例(类似锚)
2016/07/10 Javascript
Angular2利用组件与指令实现图片轮播组件
2017/03/27 Javascript
javascript实现下雨效果
2017/03/27 Javascript
react-redux中connect()方法详细解析
2017/05/27 Javascript
微信小程序实现导航栏和内容上下联动功能代码
2020/06/29 Javascript
[39:21]LGD vs OG 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.24
2019/09/10 DOTA
Python爬虫中urllib库的进阶学习
2018/01/05 Python
Python unittest单元测试框架总结
2018/09/08 Python
python实现桌面气泡提示功能
2019/07/29 Python
使用python批量转换文件编码为UTF-8的实现
2020/04/03 Python
HTML5 device access 设备访问详解
2018/05/24 HTML / CSS
不可轻视HTML5!App三年内将被html5顶替彻底消失
2015/11/18 HTML / CSS
美国在线乐器和设备商店:Musician’s Friend
2018/07/06 全球购物
英国信箱在线鲜花速递公司:Bloom & Wild
2019/03/10 全球购物
ellesse美国官方商店:意大利高级运动服品牌
2019/10/29 全球购物
奢华时尚的创新平台:Baltini
2020/10/03 全球购物
精选干货:Java精选笔试题附答案
2014/01/18 面试题
餐饮业的创业计划书范文
2013/12/26 职场文书
企业党员公开承诺书
2014/03/26 职场文书
学习十八大演讲稿
2014/09/15 职场文书
群众路线党员个人剖析材料
2014/10/08 职场文书
2014年人力资源工作总结
2014/11/19 职场文书
2015入党自传书范文
2015/06/26 职场文书
孙振耀退休感言
2015/08/01 职场文书
html实现随机点名器的示例代码
2021/04/02 Javascript
MYSQL常用函数介绍
2022/05/05 MySQL