Question

我正在使用DataTables 1.10.x，并希望使用JSON对象填充表格中的数据。

$(document).ready( function () {
    $('#diagtable').dataTable( {
        "ajax": '/api/v1/diag/1/',
        "columns": [
            { "date": "date" },
            { "diagnosis": "diagnosis" }
        ],
        dom: 'T<"clear">lfrtip',
    } );
} );

我意识到{ "date": "date" },看起来不正确，但我不确定在第一个引号之间还有什么用。

我的表格如下：

<table id="diagtable" class="table table-striped table-bordered">
  <thead>
    <tr>
      <th>Date</th>
      <th>Diagnosis</th>
      <th>&nbsp;</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

我的AJAX调用返回以下JSON：

[
    {
        "date":"2010-03-20",
        "diagnosis":"Test1"
    },
    {
        "date":"2015-03-21",
        "diagnosis":"Test2"
    }
]

我看到DataTables（HTTP 200）进行了正确的AJAX调用，但表中显示“正在加载......”。

我尝试使用下面的内容，但我的表格中仍然没有填充任何数据。

"aoColumns": [
   { "mData": "date" },
   { "mData": "diagnosis" }
]

documentation显示使用：

    "columns": [
        { "data": "name" },
        ...

但我的JSON中没有这个“数据”或类似内容。我也无法改变我的JSON。

知道我做错了吗？

Answer 1

您以JSON格式返回的数据与DataTables 1.10.x预期的默认格式不同，请参阅ajax.dataSrc或Ajax data source (objects)示例。

由于您提到您无法更改JSON结构，因此解决方案是更改dataSrc属性，请参阅下文

$(document).ready( function () {
    $('#diagtable').dataTable( {
        "ajax": {
            "url": '/api/v1/diag/1/',
            // Get JSON data from a plain array 
            // rather than an array in an object
            "dataSrc": ""
        },
        "columns": [
            { "data": "date" },
            { "data": "diagnosis" }
        ],
        dom: 'T<"clear">lfrtip',
    } );
} );

在DataTables中填充JSON对象

1 个答案: