赞
踩
话不多说直接上代码
- 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属性
-
- });
一样的部分没贴,这些是后加上的部分和改动的部分
学习记录和开发的问题记录,有不专业的地方忘各位大佬指正
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。