datatables加载表格数据入门

 function loadTrafficData(){
        $('#trafficData').DataTable({
            searching : false,
            ordering : false,
            autoWidth : false,
            paging:false,
            language : {info:'',infoEmpty:'',emptyTable:'没有数据',},
            //用ajax向后台请求数据
            ajax : {
                url : "${ctx}/orderSale/getTrafficList?saleId=${orderSale.id}",
                dataSrc : function(json){
                    console.log(json);
                    return json;
                },
                dataType : 'json',
                type : "post",
            },
            columns : [ { data : 'traffic.trafficNo', "defaultContent" : "" }, 
                        { data : 'distribute.distributionNo', "defaultContent" : "" }, 
                        { data : 'traffic.vehicle.vehicleNo', "defaultContent" : "" }, 
                        //row代表某一行数据,即从后台返回的一个实体
                        { data : 'members.memberName',render:function(data,type,row){
                            if(row.traffic.members){
                                var members = row.traffic.members;
                                var content = "";
                                for(var i=0;i<members.length;i++){
                                    content += members[i].name;
                                    content += "|";
                                }

                                return content.substring(0,content.length-1);
                            }else{
                                return "";
                            }
                        }}, 
                        { data : 'startCityEndCity',render:function(data,type,row){
                            var origin="暂无";
                            var destination="暂无";
                            //如果不写外面的if判断,里面的if如果originProvinces为空,会报错(不能够读取属性)
                            if(row.distribute.originProvinces){
                                if(row.distribute.originProvinces.nodeName){
                                    origin = row.distribute.originProvinces.nodeName;
                                }
                            }
                            if(row.distribute.destinationProvinces){            
                                if(row.distribute.destinationProvinces.nodeName){
                                    destination = row.distribute.destinationProvinces.nodeName;
                                }
                            }
                            return origin+"-->"+destination;
                        }}, 
                        { data : 'distribute.startDate', "defaultContent" : "" }, 
                        { data : 'distribute.endDate', "defaultContent" : "" },
                        { data : 'distribute.totalDate',render:function(data,type,row){
                            if(row.distribute.endDate){
                                return data;
                            }else{
                                return '配送中';
                            }
                        }} 

            ],
        });
    }

附加表格

<div id="trafficTableContiner">
                            <table class="display" id="trafficData">
                                <thead>
                                    <tr role="row" class="heading">
                                        <th>行车单编号</th>
                                        <th>配送单编号</th>
                                        <th>车辆</th>
                                        <th>人员</th>
                                        <th>始发地-目的地</th>
                                        <th>开始时间</th>
                                        <th>结束时间</th>
                                        <th>总耗时(H)</th>
                                    </tr>
                                </thead>
                                <tbody>

                                </tbody>
                            </table>
                        </div>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值