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放在异步请求处理的结果中，达到数据填充的效果。目前暂时利用这种办法如有优化，以后补充！

 

转载于:https://www.cnblogs.com/yangyuke1994/p/10024499.html