jquery - 使用 AJAX Source 将 JSON 数据加载到 JQuery DataTables

Question

我正在尝试将数据从 AJAX 源获取到 DataTables，如下所示:

$('#DT').DataTable( {
    "paging": false,
    "processing": true,
    "info": false,
    "ajax": 'http://localhost:5000/get_data'
} );

当服务器提供如下格式的数据时，它就可以工作:

{
  "data": [
    [
      1,
      "0FL0BW1MA",
      "2018-03-24 15:00",
      "Lisbon ,Lisboa ,Portugal",
      "CMA CGM GEORG FORSTER",
      "ADALV",
      "2018-05-08 02:00",
      "ADENC"
    ]
  ]
}

但实际服务器以 JSON key:value 格式发送响应，如下所示:

{
  "data": [
    {
      "containers": 4, 
      "destination_port": "2018-05-08 02:00", 
      "eta": "CMA CGM GEORG FORSTER", 
      "etd": "2018-03-24 15:00", 
      "loading_port": "Lisbon ,Lisboa ,Portugal", 
      "vessels": "0FL0BW1MA"
    }    
  ]
}

所以，我的问题是如何将实际的 JSON 数据加载到数据表中？

Answer 1

您没有提供#DT 表的内容。但我猜你已经用 TH 填充了它？

如果是这种情况，你应该能够做这样的事情

// This is the data you get from the server
var strData = {
  "data": [
      {
      "containers": 4, 
      "destination_port": "2018-05-08 02:00", 
      "eta": "CMA CGM GEORG FORSTER", 
      "etd": "2018-03-24 15:00", 
      "loading_port": "Lisbon ,Lisboa ,Portugal", 
      "vessels": "0FL0BW1MA"
      }    
  ]
}

// Creating the new array according to your specifications
var arrData = [];
for (var key in strData.data) {
    if (!strData.data.hasOwnProperty(key)) continue;

    var obj = strData.data[key];
    var tmpArr = []
    for (var prop in obj) {
        if(!obj.hasOwnProperty(prop)) continue;
        tmpArr.push(obj[prop]); 
    }
    arrData.push(tmpArr);
}

$(document).ready( function () {
    $('#table_id').dataTable( {
        "data": arrData,
    } );
} );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.css" rel="stylesheet"/>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>

<table id="table_id" class="display">
        <thead>
            <tr>
                <th>
                    containers
                </th>
                <th>
                    destination_port
                </th>
                <th>
                    eta
                </th>
                <th>
                    etd
                </th>
                <th>
                    loading_port
                </th>
                <th>
                    vessels
                </th>
            </tr>
        </thead>
</table>

但是，您可以为数据表提供列数组，而不是在 html 中定义它们，我可能会这样做。我认为这会让事情变得更有活力。

---更新了在DataTables中使用ajax函数时的代码

首先我们需要创建一个转换json的函数

function convertArray(json) {
    var arrData = [];
    for (var key in json.data) {
        if (!json.data.hasOwnProperty(key)) continue;

        var obj = json.data[key];
        var tmpArr = []
        for (var prop in obj) {
            if(!obj.hasOwnProperty(prop)) continue;
            tmpArr.push(obj[prop]); 
        }
        arrData.push(tmpArr);
    }
    return arrData;
}

我以前从未使用过 DataTables，但他们的文档指出可以使用 dataSrc 传入自定义函数。让我们尝试像这样使用它

$('#DT').DataTable( {
    "paging": false,
    "processing": true,
    "info": false,
    "ajax": {
        "url": "http://localhost:5000/get_data",
        "dataSrc": function ( json ) {
            return convertArray(json);
        }
    }
} );

这应该将 json 响应传递给我们的函数并转换数据。