layui表格插入json数据,parseData函数转化为layui标准格式后,分页功能失效的问题

话不多说直接上代码

    table.render({
        elem: '#tableRight'
        ,url:'./data/layui.json' // 此处为静态模拟数据,实际使用时需换成真实接口,
            ,parseData: function(res){ // res 即为原始返回的数据
            return {
                    "code": 0, // 解析接口状态
                    "msg": '', // 解析提示文本
                    "count": res.length, // 解析数据长度
                    "data": res // 解析数据列表
                };
            }
        ,toolbar: '#toolbarDemo'
        ,height: 'full-35' // 最大高度减去其他容器已占有的高度差
        ,cellMinWidth: 80
        ,totalRow: false // 关闭合计行
        ,page: true
        ,limits: [5, 10, 15]
        ,limit:5
        ,cols: [[
            {field:'DataTime', title:'时间', width: 120}
            ,{field:'MN', title:'站点', width: 120}
            ,{field:'e01202_Avg', title:'流速(米/秒)', width: 120}
            ,{field:'e01203_Avg', title:'瞬时流量(立方米/秒)', width: 120}
            ,{field:'w01019_Avg', title:'高锰酸盐指数(mg/L)', width: 120}
            ,{field:'w21001_Avg', title:'总氮(mg/L)', width: 120}
            ,{field:'w21011_Avg', title:'总磷(mg/L)', width: 120}
            ,{field:'w01020_Avg', title:'总有机碳(mg/L)', width: 120}
            ,{field:'w01014_Avg', title:'电导率(uS/cm)', width: 120}
            ,{field:'w01003_Avg', title:'浑浊度(NTU)', width: 120}
            ,{field:'w01009_Avg', title:'溶解氧(mg/L)', width: 120}
            ,{field:'w01010_Avg', title:'水温(℃)', width: 120}
            ,{field:'w01001_Avg', title:'pH值(无量纲)', width: 120}
            ,{field:'w21003_Avg', title:'氨氮(mg/L)', width: 120}
        ]],
        data:tabledata
        ,done: function(){
        }
        ,error: function(res, msg){
            console.log(res, msg)
        }
    });

最开始是用了layui的模板直接请求url,请求到的数据是[{id=1,rid=2},{id=2,rid=4}...]这种格式的,利用layui的parseData将数据标准化,数据是显示出来了,但是所有的数据都显示在一页中,分页没有效果,查了很多办法还是没有解决,最后一个博主的文章给了我一点启发,这个链接
(53条消息) layui分页失效问题_layui的分页为什么不起作用_醉生梦死bug中的博客-CSDN博客

这个表格的render实例中是有一个data属性值的,但是如果用render中的url直接请求,就不用配置这个data属性了,但是就会出现分页不管用的情况,什么原因不清除,我自己是尝试了一下使用data配置项中的数据,分页管用了,所以就可以先用ajax请求数据赋给一个全局变量,这里我用的是同步加载请求,下面是改后的代码

 var tabledata//定义了一个变量
    $.ajax({
        url:'http://localhost:9997/swx/autoPro/selectAll',
        type:'get',
        async:false,
        success:function (data1) {
            tabledata = data1
        }
    })
    // 创建渲染实例
    table.render({
       //render自带的url记得删掉
        data:tabledata这里用了data属性
       
 });

一样的部分没贴,这些是后加上的部分和改动的部分
学习记录和开发的问题记录,有不专业的地方忘各位大佬指正

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值