当前位置:   article > 正文

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

layui parsedata没效果

话不多说直接上代码

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

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

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

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

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

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/小小林熬夜学编程/article/detail/158004
推荐阅读
相关标签
  

闽ICP备14008679号