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>0){ for(var i=0;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:50 }) } else { layer.msg(data.errorMsg); } })
如上所示,我们可以将table的render放在异步请求处理的结果中,达到数据填充的效果。目前暂时利用这种办法如有优化,以后补充!