话不多说直接上代码
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属性
});
一样的部分没贴,这些是后加上的部分和改动的部分
学习记录和开发的问题记录,有不专业的地方忘各位大佬指正