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);

使用AJAX源将JSON数据加载到JQuery DataTables

2 个答案: