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

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM