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 相关文章推荐
JavaScript RegExp方法获取地址栏参数(面向对象)
Mar 10 Javascript
JavaScript性能陷阱小结(附实例说明)
Dec 28 Javascript
防止按钮在短时间内被多次点击的方法
Mar 10 Javascript
Angularjs基础知识及示例汇总
Jan 22 Javascript
javascript实现将文件保存到本地方法汇总
Jul 26 Javascript
jquery实现点击展开列表同时隐藏其他列表
Aug 10 Javascript
jquery对dom节点的操作【推荐】
Apr 15 Javascript
利用Node.js编写跨平台的spawn语句详解
Feb 12 Javascript
利用Plupload.js解决大文件上传问题, 带进度条和背景遮罩层
Mar 15 Javascript
Vue项目部署的实现(阿里云+Nginx代理+PM2)
Mar 26 Javascript
Node.JS获取GET,POST数据之queryString模块使用方法详解
Feb 06 Javascript
TS 类型兼容教程示例详解
Sep 23 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
第二节 对象模型 [2]
2006/10/09 PHP
php和数据库结合的一个简单的web实例 代码分析 (php初学者)
2011/07/28 PHP
getJSON跨域SyntaxError问题分析
2014/08/07 PHP
php中__toString()方法用法示例
2016/12/07 PHP
PHP使用POP3读取邮箱接收邮件的示例代码
2020/07/08 PHP
jquery键盘事件使用介绍
2011/11/01 Javascript
js中自定义方法实现停留几秒sleep
2014/07/11 Javascript
Jquery节点遍历next与nextAll方法使用示例
2014/07/22 Javascript
完美实现仿QQ空间评论回复特效
2015/05/06 Javascript
使用canvas实现仿新浪微博头像截取上传功能
2015/09/02 Javascript
酷! 不同风格页面布局幻灯片特效js实现
2021/02/19 Javascript
关于Jquery中的事件绑定总结
2016/10/26 Javascript
Easyui笔记2:实现datagrid多行删除的示例代码
2017/01/14 Javascript
vue添加axios,并且指定baseurl的方法
2018/09/19 Javascript
JavaScript创建对象的四种常用模式实例分析
2019/01/11 Javascript
mpvue网易云短信接口实现小程序短信登录的示例代码
2020/04/03 Javascript
vue 实现setInterval 创建和销毁实例
2020/07/21 Javascript
Python中的下划线详解
2015/06/24 Python
python 生成器生成杨辉三角的方法(必看)
2017/04/10 Python
浅析python继承与多重继承
2018/09/13 Python
Pycharm安装Qt Design快捷工具的详细教程
2020/11/18 Python
Python lxml库的简单介绍及基本使用讲解
2020/12/22 Python
Python创建自己的加密货币的示例
2021/03/01 Python
浅析HTML5的WebSocket与服务器推送事件
2016/02/19 HTML / CSS
国际书籍零售商:Wordery
2017/11/01 全球购物
Pretty Little Thing美国:时尚女性服饰
2018/08/27 全球购物
工程造价专业大专生求职信
2013/10/06 职场文书
大学生职业生涯规划书前言
2014/01/09 职场文书
冰淇淋开店创业计划书
2014/02/01 职场文书
大学生工作自荐书
2014/06/16 职场文书
中班教师个人总结
2015/02/05 职场文书
2015年青年教师工作总结
2015/05/25 职场文书
MySQL主从复制断开的常用修复方法
2021/04/07 MySQL
Springboot/Springcloud项目集成redis进行存取的过程解析
2021/12/04 Redis
高性能跳频抗干扰宽带自组网电台
2022/02/18 无线电
如何设置多台电脑共享打印机?多台电脑共享打印机的方法
2022/04/08 数码科技