使用 AJAX 源将 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 响应传递给我们的函数并转换数据。

Answer 2

假设您无法修改来自服务器的响应，这将是迄今为止最好的解决方案，那么您可以使用 map() 将响应从对象数组修改为嵌套数组，如下所示：

var source = {
  "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"
  }]
};

var output = {
  data: source .data.map(function(item) {
    return [
      item.containers,
      item.vessels,
      item.etd,
      item.loading_port,
      item.eta,
      'ADALV', // not clear where this value is in the source 
      item.destination_port,
      'ADENC' // not clear where this value is in the source 
    ]
  })
}

console.log(output);