最近使用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放在異步請求處理的結果中,達到數據填充的效果。目前暫時利用這種辦法如有優化,以后補充!