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 相关文章推荐
jquery中使用ajax获取远程页面信息
Nov 13 Javascript
基于JQuery的一句话搞定手风琴菜单
Sep 14 Javascript
jquery 动态创建元素的方式介绍及应用
Apr 21 Javascript
js模拟hashtable的简单实例
Mar 06 Javascript
JavaScript 正则表达式中global模式的特性
Feb 25 Javascript
node模块机制与异步处理详解
Mar 13 Javascript
老生常谈javascript变量的命名规范和注释
Sep 29 Javascript
js实现贪吃蛇小游戏(容易理解)
Jan 22 Javascript
node.js中express中间件body-parser的介绍与用法详解
May 23 Javascript
JavaScript之DOM插入更新删除_动力节点Java学院整理
Jul 03 Javascript
javascript+css3开发打气球小游戏完整代码
Nov 28 Javascript
layui获取选中行数据的实例讲解
Aug 19 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实现的PDO异常处理操作分析
2018/12/27 PHP
用js计算页面执行时间的函数
2006/12/07 Javascript
myeclipse安装jQuery插件的方法
2011/03/29 Javascript
解决js正则匹配换行问题实现代码
2012/12/10 Javascript
js操作table元素实现表格行列新增、删除技巧总结
2015/11/18 Javascript
设置jQueryUI DatePicker默认语言为中文
2016/06/04 Javascript
javascript 将共享属性迁移到原型中去的实现方法
2016/08/31 Javascript
AngularJS学习笔记(三)数据双向绑定的简单实例
2016/11/08 Javascript
BootStrap学习系列之布局组件(下拉,按钮组[toolbar],上拉)
2017/01/03 Javascript
JS实现禁止高频率连续点击的方法【基于ES6语法】
2017/04/25 Javascript
jQuery导航条固定定位效果实例代码
2017/05/26 jQuery
解决Mac下安装nmp的淘宝镜像失败问题
2018/05/16 Javascript
基于jQuery的时间戳与日期间的转化
2019/06/21 jQuery
jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作示例
2020/06/02 jQuery
vue3为什么要用proxy替代defineProperty
2020/10/19 Javascript
[03:49]辉夜杯现场龙骑士COSER秀情商“我喜欢芬队!”
2015/12/27 DOTA
[37:37]DAC2018 4.4 淘汰赛 Optic vs Mineski 第二场
2018/04/05 DOTA
[04:20]DOTA2-DPC中国联赛 正赛 VG vs LBZS 选手采访 1月19日
2021/03/11 DOTA
Python中的列表生成式与生成器学习教程
2016/03/13 Python
pandas string转dataframe的方法
2018/04/11 Python
python构建基础的爬虫教学
2018/12/23 Python
Python学习笔记之For循环用法详解
2019/08/14 Python
关于torch.optim的灵活使用详解(包括重写SGD,加上L1正则)
2020/02/20 Python
Python的控制结构之For、While、If循环问题
2020/06/30 Python
详解如何解决canvas图片getImageData,toDataURL跨域问题
2018/09/17 HTML / CSS
植村秀美国官网:Shu Uemura美国
2019/03/19 全球购物
美国豪华的多品牌精品店:The Webster
2019/07/31 全球购物
介绍一下内联、左联、右联
2013/12/31 面试题
管理失职检讨书
2014/02/12 职场文书
企业员工培训感言
2014/02/26 职场文书
2014年社区庆元旦活动方案
2014/03/08 职场文书
穆斯林的葬礼读书笔记
2015/06/26 职场文书
获奖感言怎么写
2015/07/31 职场文书
2016道德模范先进事迹材料
2016/02/26 职场文书
MySQL中你可能忽略的COLLATION实例详解
2021/05/12 MySQL
Python装饰器详细介绍
2022/03/25 Python