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 相关文章推荐
JSON辅助格式化处理方法
Mar 26 Javascript
jQuery实现的五子棋游戏实例
Jun 13 Javascript
使用JQuery 加载页面时调用JS的实现方法
May 30 Javascript
Bootstrap编写导航栏和登陆框
May 30 Javascript
微信小程序 css使用技巧总结
Jan 09 Javascript
微信小程序之自定义组件的实现代码(附源码)
Aug 02 Javascript
bootstrap-treeview实现多级树形菜单 后台JSON格式如何组织?
Jul 26 Javascript
在Layui中实现开关按钮的效果实例
Sep 29 Javascript
JavaScript 作用域实例分析
Oct 02 Javascript
uniapp开发小程序实现滑动页面控制元素的显示和隐藏效果
Dec 10 Javascript
vue 实现click同时传入事件对象和自定义参数
Jan 29 Vue.js
JavaScript实现一键复制内容剪贴板
Jul 23 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
在windows平台上构建自己的PHP实现方法(仅适用于php5.2)
2013/07/05 PHP
PHP缓存集成库phpFastCache用法
2014/12/15 PHP
php中socket通信机制实例详解
2015/01/03 PHP
PHP简单实现模拟登陆功能示例
2017/09/15 PHP
tp5框架使用composer实现日志记录功能示例
2019/01/10 PHP
Laravel框架实现的rbac权限管理操作示例
2019/01/16 PHP
PHP中abstract(抽象)、final(最终)和static(静态)原理与用法详解
2020/06/05 PHP
一个javascript图片阅览组件
2010/11/09 Javascript
JS OffsetParent属性深入解析
2014/01/13 Javascript
jQuery在ul中显示某个li索引号的方法
2015/03/17 Javascript
简介JavaScript中POSITIVE_INFINITY值的使用
2015/06/05 Javascript
JS利用cookie记忆当前位置的防刷新导航效果
2015/10/15 Javascript
深入剖析JavaScript面向对象编程
2016/07/12 Javascript
JavaScript中的this引用(推荐)
2016/08/05 Javascript
开源免费天气预报接口API及全国所有地区代码(国家气象局提供)
2016/12/26 Javascript
Jqprint实现页面打印
2017/01/06 Javascript
js实现随机抽选效果、随机抽选红色球效果
2017/01/13 Javascript
vue.js删除动态绑定的radio的指定项
2017/06/02 Javascript
javascript高级模块化require.js的具体使用方法
2017/10/31 Javascript
移动web开发之touch事件实例详解
2018/01/17 Javascript
判断“命令按钮”是否被鼠标单击详解
2019/07/31 Javascript
vue实现日历表格(element-ui)
2020/09/24 Javascript
详解如何使用React Hooks请求数据并渲染
2020/10/18 Javascript
对Python3+gdal 读取tiff格式数据的实例讲解
2018/12/04 Python
Python爬虫实战之12306抢票开源
2019/01/24 Python
Python+OpenCV实现实时眼动追踪的示例代码
2019/11/11 Python
使用Django搭建一个基金模拟交易系统教程
2019/11/18 Python
Python实现新型冠状病毒传播模型及预测代码实例
2020/02/05 Python
电子商务专业个人的自我评价
2013/11/19 职场文书
党员创先争优承诺书
2014/03/26 职场文书
大学生心理活动总结
2014/07/04 职场文书
2014年标准化工作总结
2014/12/17 职场文书
清洁员岗位职责
2015/02/15 职场文书
2016新年问候语大全
2015/11/11 职场文书
银行中层干部培训心得体会
2016/01/11 职场文书
Python MNIST手写体识别详解与试练
2021/11/07 Python