
正文
layui table异步调用数据的时候,数据展示不出来现象解决方案
提示:扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
最近使用layui table进行异步获取数据并填充的时候,控制台打印出数据长度为0,但是其中还有数据,网上找了很多办法,下边是我最后使用的。
一般,render渲染表格是独立的书写格式,但是我在做数据统计的时候,需要展示表格和图表,两个数据是一起获取到的,如何再填充到table中去呢?
下边列出实现代码:
//定义
var tempData = {};
//补充搜素条件
tempData.customerId = customerId;
tempData.year = year;
tempData.month = month;
//转换格式
var conditionStr = JSON.stringify(tempData);
var url = "${pageContext.request.contextPath}/statisticsCtrl/getOrderNewDayCountByYearAndMonth";
//post调用
$.post(url, {"conditionStr": conditionStr}, function (data) {
if (data.success) {
var resultData = data.data;
//初始化报表折线图
getEcharts(year,month,resultData.days,resultData.count);
//填充表格数据
allValue = [];
if(resultData.days && resultData.days.length>){
for(var i=;i<resultData.days.length;i++){
var dataTemp = {};
dataTemp.customerId = customerId;
dataTemp.year = year;
dataTemp.month = month;
dataTemp.count = resultData.count[i];
dataTemp.days = resultData.days[i];
allValue.push(dataTemp);
}
}
table.render({
elem: '#orderStaticstisTable'
, height: 'full-115'
, data: allValue
, cols:
[[ //表头
{field: 'customerId', title: '客户',hide:true}
,{field: 'year', title: '年份',hide:true}
,{field: 'month', title: '月份',hide:true}
,{field: 'days', title: '日期'}
, {field: 'count', title: '下单量'}
]]
,limit:
})
} else {
layer.msg(data.errorMsg);
}
})
如上所示,我们可以将table的render放在异步请求处理的结果中,达到数据填充的效果。目前暂时利用这种办法如有优化,以后补充!






