vue.js表格分页示例


Posted in Javascript onOctober 18, 2016

分页一般和表格一起用,分页链接作为表格的一部分,将分页链接封装成一个独立的组件,然后作为子组件嵌入到表格组件中,这样比较合理。

效果:

vue.js表格分页示例

代码:

1.注册一个组件

js

Vue.component('pagination',{
 template:'#paginationTpl',
 replace:true,
 props:['cur','all','pageNum'],
 methods:{
 //页码点击事件
 btnClick: function(index){
 if(index != this.cur){
  this.cur = index;
 }
 }
 },
 watch:{
 "cur" : function(val,oldVal) {
 this.$dispatch('page-to', val);
 }
 },
 computed:{
 indexes : function(){
 var list = [];
 //计算左右页码
 var mid = parseInt(this.pageNum / 2);//中间值
 var left = Math.max(this.cur - mid,1);
 var right = Math.max(this.cur + this.pageNum - mid -1,this.pageNum);
 if (right > this.all ) { right = this.all}
 while (left <= right){
  list.push(left);
  left ++;
 }
 return list;
 },
 showLast: function(){
 return this.cur != this.all;
 },
 showFirst: function(){
 return this.cur != 1;
 }
 }
 });

模板:

<script type="text/template" id="paginationTpl">
 <nav v-if="all > 1">
 <ul class="pagination">
 <li v-if="showFirst"><a href="javascript:" @click="cur--">«</a></li>
 <li v-for="index in indexes" :class="{ 'active': cur == index}">
 <a @click="btnClick(index)" href="javascript:">{{ index }}</a>
 </li>
 <li v-if="showLast"><a @click="cur++" href="javascript:">»</a></li>
 <li><a>共<i>{{all}}</i>页</a></li>
 </ul>
 </nav>
</script>

HTML:

<div id='item_list'>
 ...
 <pagination :cur="1" :all="pageAll" :page-num="10" @page-to="loadList"></pagination>
</div>

当点击分页链接的时候,通过watch cur,子组件分发 page-to 事件,通过 @page-to="loadList" 标签指定使用父组件 loadList 方法处理事件,父组件接收到page值然后ajax加载数据,根据服务端返回计算并更新自身的 pageAll 值,因为子组件prop通过 :all="pageAll" 动态绑定了父组件的pageAll对象,所以子组件会联动更新。

附上一个简单的表格组件例子:

var vm = new Vue({
 el: "#item_list",
 data: {
 items : [],
 //分页参数
 pageAll:0, //总页数,根据服务端返回total值计算
 perPage:10 //每页数量
 },
 methods: {
 loadList:function(page){
 var that = this;
 $.ajax({
  url : "/getList",
  type:"post",
  data:{"page":page,"perPage":this.perPage},
  dataType:"json",
  error:function(){alert('请求列表失败')},
  success:function(res){
  if (res.status == 1) {
  that.items = res.data.list;
  that.perPage = res.data.perPage;
  that.pageAll = Math.round(res.data.total / that.perPage);//计算总页数
  }
  }
 });
 },
 //初始化
 init:function(){
 this.loadList(1);
 }
 }
 });
 vm.init();

精彩专题分享:jquery分页功能操作 JavaScript分页功能操作

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

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

Javascript 相关文章推荐
Maps Javascript
Jan 22 Javascript
永不消失的title提示代码
Feb 15 Javascript
ExtJS 2.0 GridPanel基本表格简明教程
May 25 Javascript
JQuery自定义事件的应用 JQuery最佳实践
Aug 01 Javascript
13 个JavaScript 性能提升技巧分享
Jul 26 Javascript
JavaScript脚本判断蜘蛛来源的方法
Sep 22 Javascript
常用Javascript函数与原型功能收藏(必看篇)
Oct 09 Javascript
js 客户端打印html 并且去掉页眉、页脚的实例
Nov 03 Javascript
VUE.js实现动态设置输入框disabled属性
Oct 28 Javascript
jquery获取input输入框中的值
Nov 13 jQuery
最全vue的vue-amap使用高德地图插件画多边形范围的示例代码
Jul 17 Javascript
微信小程序基于高德地图API实现天气组件(动态效果)
Oct 22 Javascript
Angular.js中用ng-repeat-start实现自定义显示
Oct 18 #Javascript
Bootstrap框架的学习教程详解(二)
Oct 18 #Javascript
微信小程序 教程之WXSS
Oct 18 #Javascript
微信小程序 教程之引用
Oct 18 #Javascript
Angular2中Bootstrap界面库ng-bootstrap详解
Oct 18 #Javascript
微信小程序 教程之事件
Oct 18 #Javascript
微信小程序 教程之模板
Oct 18 #Javascript
You might like
让PHP以ROOT权限执行系统命令的方法
2011/02/10 PHP
基于AppServ,XAMPP,WAMP配置php.ini去掉警告信息(NOTICE)的方法详解
2013/05/07 PHP
PHP变量赋值、代入给JavaScript中的变量
2015/06/29 PHP
PHP生成随机字符串(3种方法)
2015/09/25 PHP
PHP foreach遍历多维数组实现方式
2016/11/16 PHP
yii2利用自带UploadedFile实现上传图片的示例
2017/02/16 PHP
php解析非标准json、非规范json的方式实例
2020/12/10 PHP
一个简单的jQuery插件制作 学习过程及实例
2010/04/25 Javascript
通过AJAX的JS、JQuery两种方式解析XML示例介绍
2013/09/23 Javascript
$.each与$().each的区别示例介绍
2014/03/20 Javascript
详解JavaScript数组的操作大全
2015/10/19 Javascript
超详细的javascript数组方法汇总
2015/11/21 Javascript
AngularJS 指令详细介绍
2016/07/27 Javascript
js创建对象几种方式的优缺点对比
2016/09/28 Javascript
JavaScript实现的鼠标响应颜色渐变效果完整实例
2017/02/18 Javascript
jQuery+ThinkPHP+Ajax实现即时消息提醒功能实例代码
2017/03/21 jQuery
JS利用正则表达式实现简单的密码强弱判断实例
2017/06/16 Javascript
解决Vue不能检测数组或对象变动的问题
2018/02/24 Javascript
js继承的这6种方式!(上)
2019/04/23 Javascript
Vue3项目打包后部署到服务器 请求不到后台接口解决方法
2020/02/06 Javascript
[02:08]2014DOTA2国际邀请赛 430专访:力争取得小组前二
2014/07/11 DOTA
[46:43]DOTA2上海特级锦标赛D组小组赛#1 EG VS COL第三局
2016/02/28 DOTA
[41:17]完美世界DOTA2联赛PWL S3 access vs CPG 第二场 12.13
2020/12/17 DOTA
Python闭包实现计数器的方法
2015/05/05 Python
Python 字典与字符串的互转实例
2017/01/13 Python
利用python批量给云主机配置安全组的方法教程
2017/06/21 Python
python利用sklearn包编写决策树源代码
2017/12/21 Python
python pandas中对Series数据进行轴向连接的实例
2018/06/08 Python
使用python实现ftp的文件读写方法
2019/07/02 Python
Django ORM 聚合查询和分组查询实现详解
2019/08/09 Python
给Django Admin添加验证码和多次登录尝试限制的实现
2020/07/26 Python
Python configparser模块封装及构造配置文件
2020/08/07 Python
css3给背景图片加颜色遮罩的方法
2019/11/05 HTML / CSS
社区禁毒工作方案
2014/06/02 职场文书
个人整改方案范文
2014/10/25 职场文书
小学五年级(说明文3篇)
2019/08/13 职场文书