vue.js 表格分页ajax 异步加载数据
2016-10-18 14:50
1036 查看
Vue.js是一个轻巧、高性能、可组件化的MVVM库,同时拥有非常容易上手的API。
分页一般和表格一起用,分页链接作为表格的一部分,将分页链接封装成一个独立的组件,然后作为子组件嵌入到表格组件中,这样比较合理。
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 = this.cur - mid; var right = Math.max(this.cur + this.pageNum - mid -1,this.pageNum); if (left < 1) {left = 1} if (right > this.all ) { right = this.all} while (left <= right){ list.push(left) left ++ } return list; }, showLast: function(){ if(this.cur == this.all){ return false } return true }, showFirst: function(){ if(this.cur == 1){ return false } return true } } });
模板:
<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='parentEle'> ... <pagination :cur="1" :all="pageAll" :page-num="10" @page-to="loadList"></pagination> </div>
当点击分页链接的时候,会触发
page-to
事件,而我们在html标签中指定了使用父组件
loadList
方法处理事件,我们只要在组件中把当前页码传给父组件即可,父组件负责ajax加载数据,并更新自身的 pageAll 值。
您可能感兴趣的文章:
- 详解vue 中使用 AJAX获取数据的方法
- 详解vue与后端数据交互(ajax):vue-resource
- 详解使用Vue.Js结合Jquery Ajax加载数据的两种方式
- vue2 前后端分离项目ajax跨域session问题解决方法
- Vue-resource实现ajax请求和跨域请求示例
- Vue form 表单提交+ajax异步请求+分页效果
- vue实现ajax滚动下拉加载,同时具有loading效果(推荐)
- vue使用Axios做ajax请求详解
- Vue.js Ajax动态参数与列表显示实现方法
- 使用vue框架 Ajax获取数据列表并用BootStrap显示出来
- Vue.js展示AJAX数据简单示例讲解
- 详解Vue.js基于$.ajax获取数据并与组件的data绑定
- Javascript vue.js表格分页,ajax异步加载数据
- 浅谈Vue.js应用的四种AJAX请求数据模式
- VUE 更好的 ajax 上传处理 axios.js实现代码
- Vue.js使用$.ajax和vue-resource实现OAuth的注册、登录、注销和API调用
- Vue Ajax跨域请求实例详解
- vue发送ajax请求详解
相关文章推荐
- vue.js 表格分页ajax 异步加载数据
- Javascript vue.js表格分页,ajax异步加载数据
- Javascript vue.js表格分页,ajax异步加载数据
- jQuery+Ajax+PHP实现异步分页数据显示--js可参考
- asp.net 使用js分页实现异步加载数据
- asp.net 使用js分页,异步加载数据
- 向上滚动或者向下滚动分页异步加载数据(Ajax + lazyload)
- ajax异步获取数据后动态向表格中添加数据(行2) cheat-order.js
- Atitit 项目界面h5化静态html化计划---vue.js 把ajax获取到的数据 绑定到表格控件 v2 r33.docx
- asp.net 使用js分页实现异步加载数据
- query table异步加载数据,包括分页,可以自由定制表格样式
- Atitit 项目界面h5化静态html化计划---vue.js 把ajax获取到的数据 绑定到表格控件 v2 r33.docx
- Slider 滚动条 Pagination分页插件 JS Ajax 数据范围筛选 加载 翻页 笔记
- js 分页、表格、生成数据
- js 下拉底部加载|滑轮滚动到页面底部ajax加载数据的实例
- 一个纯js写的分页功能,表格数据为json串
- 使用bootstrap-paginator.js 分页来进行ajax 异步分页请求
- js滚动异步加载数据的思路
- Cocos2d-js 开发记录:图片数据资源等的异步加载
- (24)ExtJS之表格加载远程数据及其分页显示