datatables加载表格数据入门

你的名字 2022-07-13 13:17 234阅读 0赞

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>

发表评论取消回复

表情：

评论列表（有 0 条评论，234人围观）

还没有评论，来说两句吧...

相关阅读

相关 DataTable异步加载数据并刷新

在工作中遇到这样的情况，使用DataTable填充数据（场景不相同）： ![在这里插入图片描述][20201117112007482.jpeg_pic_center]

喜欢ヅ旅行/ 2022年12月22日 00:52/ 0 赞/ 188 阅读

相关 datatables加载表格数据入门

function loadTrafficData(){ $('trafficData').DataTable({

你的名字/ 2022年07月13日 13:17/ 0 赞/ 235 阅读

相关 Datatables 加载数据异步二次加载渲染表格及initComplete

一、我们在使用dataTables进行数据统计时，不可避免的会碰到对数据的统计。当进行服务器端数据读取时，，进行二次加载，渲染入数据。之前我采用的是重新发起dat

矫情吗；*/ 2022年07月13日 11:09/ 0 赞/ 420 阅读

相关 datatables 通过object加载DT

//回调函数 queryStaticBattery\_cb=function(result)\{ switchNum = 2; let data=result.da

た入场券/ 2022年07月13日 11:08/ 0 赞/ 135 阅读

相关 jquery dataTable 后台加载数据并分页

使用 dataTable后台加载数据并分页。网上版本很多，但很多都是不能用或者不详细的，这里是已经验证过的。引用 js文件 <scr

深藏阁楼爱情的钟/ 2022年07月13日 06:45/ 0 赞/ 261 阅读

相关 Javaweb表格加载---DataTable

> Datatables是一款jquery表格插件。它是一个高度灵活的工具，可以将任何HTML表格添加高级的交互功能。使用 jQuery Datatable 构造数据列表，并

野性酷女/ 2022年07月12日 09:58/ 0 赞/ 349 阅读

相关 DataTable(数据表格)使用技巧汇总

DataTable(数据表格)使用技巧汇总 1.如何设定表格中行的高度(包括表格头，合计栏) headerHeight：设定表格头的高度； footerHeig

迈不过友情╰/ 2022年06月18日 01:10/ 0 赞/ 1434 阅读

相关 DataTables如何重新加载数据

DataTables加载数据 // 调用ajax请求数据 g.ajax("/srp/data", data, function (jsonStr) {

你的名字/ 2022年04月25日 02:36/ 0 赞/ 1035 阅读

相关 DataTables如何重新加载数据

DataTables加载数据 // 调用ajax请求数据 g.ajax("/srp/data", data, function (jsonStr) {

朴灿烈づ我的快乐病毒、/ 2022年01月09日 07:03/ 0 赞/ 503 阅读

相关 datatables组件加载数据

使用jquery的datatables插件渲染表格组件时，最佳的方法如下：全局定义dataTables对象变量；页面加载时初始化dataTables对象；

朴灿烈づ我的快乐病毒、/ 2021年06月24日 16:09/ 0 赞/ 453 阅读