Javascript vue.js表格分页,ajax异步加载数据


Posted in Javascript onOctober 24, 2016

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

效果:

Javascript vue.js表格分页,ajax异步加载数据

代码:

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.ceil(res.data.total / that.perPage);//计算总页数
            }
          }
        });
      },
      //初始化
      init:function(){
        this.loadList(1);
      }
    }
  });
  vm.init();

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
VBScript版代码高亮
Jun 26 Javascript
jquery多行滚动/向左或向上滚动/响应鼠标实现思路及代码
Jan 23 Javascript
jQuery取id有.的值的方法
May 21 Javascript
返回顶部按钮响应滚动且动态显示与隐藏
Oct 14 Javascript
Javascript原型链的原理详解
Jan 05 Javascript
JS控制静态页面之间传递参数获取参数并应用的简单实例
Aug 10 Javascript
JavaScript中定义对象原型的两种使用方法
Dec 15 Javascript
js通过指定下标或指定元素进行删除数组的实例
Jan 12 Javascript
jquery ztree实现右键收藏功能
Nov 20 jQuery
Node.js实现简单的爬取的示例代码
Jun 25 Javascript
JavaScript鼠标拖拽事件详解
Apr 03 Javascript
ant design vue中日期选择框混合时间选择器的用法说明
Oct 27 Javascript
H5移动端适配 Flexible方案
Oct 24 #Javascript
javascript的document中的动态添加标签实现方法
Oct 24 #Javascript
Ajax+FormData+javascript实现无刷新表单信息提交
Oct 24 #Javascript
利用JS实现点击按钮后图片自动切换的简单方法
Oct 24 #Javascript
express文件上传中间件Multer详解
Oct 24 #Javascript
用js实现博客打赏功能
Oct 24 #Javascript
jQuery autoComplete插件两种使用方式及动态改变参数值的方法详解
Oct 24 #Javascript
You might like
有关 PHP 和 MySQL 时区的一点总结
2008/03/26 PHP
PHP连接access数据库
2008/03/27 PHP
php检测文件编码的方法示例
2014/04/25 PHP
thinkphp3.2.2前后台公用类架构问题分析
2014/11/25 PHP
Symfony2安装的方法(2种方法)
2016/02/04 PHP
php结合mysql与mysqli扩展处理事务的方法
2016/06/29 PHP
利用JS实现浏览器的title闪烁
2013/07/08 Javascript
jquery实现多级下拉菜单的实例代码
2013/10/02 Javascript
JavaScript中具名函数的多种调用方式总结
2014/11/08 Javascript
jQuery中parent()方法用法实例
2015/01/07 Javascript
基于replaceChild制作简单的吞噬特效
2015/09/21 Javascript
jQuery增加与删除table列的方法
2016/03/01 Javascript
Jquery ajax请求导出Excel表格的实现代码
2016/06/08 Javascript
Bootstrap导航条鼠标悬停下拉菜单
2017/01/04 Javascript
JavaScript登录记住密码操作(超简单代码)
2017/03/22 Javascript
easyui下拉框动态级联加载的示例代码
2017/11/29 Javascript
Angular项目从新建、打包到nginx部署全过程记录
2017/12/09 Javascript
vue.js 实现输入框动态添加功能
2018/06/25 Javascript
浅谈Node框架接入ELK实践总结
2019/02/22 Javascript
python杀死一个线程的方法
2015/09/06 Python
python 利用for循环 保存多个图像或者文件的实例
2018/11/09 Python
python中多个装饰器的调用顺序详解
2019/07/16 Python
基于python的列表list和集合set操作
2019/11/24 Python
Python实现word2Vec model过程解析
2019/12/16 Python
百思买美国官网:Best Buy
2016/07/28 全球购物
世界领先的电子书网站:eBooks.com(在线购买小说、非小说和教科书)
2019/03/30 全球购物
微软巴西官方网站:Microsoft Brasil
2019/09/26 全球购物
怎样写好自我鉴定
2013/12/04 职场文书
市场营销专业个人求职信范文
2013/12/14 职场文书
信用社员工先进事迹材料
2014/02/04 职场文书
会计求职信范文
2014/05/24 职场文书
2015届大学生就业推荐表自我评价
2014/09/27 职场文书
广告业务员岗位职责
2015/02/13 职场文书
《我要的是葫芦》教学反思
2016/02/18 职场文书
广播稿:校园广播稿范文
2019/04/17 职场文书
Nginx 路由转发和反向代理location配置实现
2021/11/11 Servers