使用带有 AJAX 和 JSON 文件的 DataTables 的表中没有可用数据答案

【问题标题】：No data available in table using DataTables with AJAX and JSON file使用带有 AJAX 和 JSON 文件的 DataTables 的表中没有可用数据
【发布时间】：2019-01-30 23:50:08
【问题描述】：

我正在尝试使用 DataTables 使用 JSON 文件填充表格，但每次加载页面时，表格只显示“表格中没有可用数据”。

这是我当前的代码：

<table id="table_id" class="display">
<thead>
    <tr>
        <th>ID</th>
        <th>Nombre</th>
        <th>Apellido</th>
        <th>Mail</th>
        <th>Confirmado</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>Row 1 Data 1</td>
        <td>Row 1 Data 2</td>
    </tr>
    <tr>
        <td>Row 2 Data 1</td>
        <td>Row 2 Data 2</td>
    </tr>
</tbody>
</table>

<script>
    $(document).ready(function () {
        $('#table_id').DataTable({
            "ajax" : {"url":"/personas.json", "dataSrc":""},
            "columns" : [
                {personas : "id"},
                {personas : "nombre"},
                {personas : "apellido"},
                {personas : "email"},
                {personas : "confirmado"}
            ]
        });
    });
</script>

这是一段 JSON 代码：

{
    "personas": [
        {
            "id": 0,
            "nombre": "Aurelia",
            "apellido": "Osborn",
            "email": "aureliaosborn@lovepad.com",
            "confirmado": false
        },
        {
            "id": 1,
            "nombre": "Curry",
            "apellido": "Jefferson",
            "email": "curryjefferson@lovepad.com",
            "confirmado": true
        }
    ]
}

这是我在加载页面（部分）时得到的：

为了以防万一这可能是问题，这是 JSON 的目录：

【问题讨论】：

标签： jquery node.js ajax express

【解决方案1】：

改变

"ajax" : {"url":"/personas.json", "dataSrc":""}

到

"ajax" : {"url":"/personas.json", "dataSrc":"personas"}

通过指定dataSrc，您告诉您使用personas.json 中的personas 数组作为数据源。

请参阅这些以供参考：

https://datatables.net/examples/ajax/custom_data_property.html https://datatables.net/examples/ajax/custom_data_flat.html

另外，如前所述，您的数组[ 左括号没有匹配的] 右括号。

这是一个使用您的数据的工作示例：

https://jsfiddle.net/onLuw2pa/165/ 我已将您的 JSON 对象更改为值数组（通过这样做您不必指定 columns）：

{
   "personas":[
      [
         0,
         "Aurelia",
         "Osborn",
         "aureliaosborn@lovepad.com",
         false
      ],
      [
         1,
         "Curry",
         "Jefferson",
         "curryjefferson@lovepad.com",
         true
      ]
   ]
}

https://jsfiddle.net/onLuw2pa/169/ 这是一个使用您的确切 JSON 的示例。

【讨论】：

嗨 dziraf，我已经按照您所说的更改了代码，但现在我收到了以下消息：“DataTables 警告：表 id=table_id - 请求第 0 行第 0 列的未知参数‘0’” .缺少的括号在那里，我只是在这里复制错了。另外，我需要 JSON 像现在一样工作。很遗憾，我无法更改它。
我已更新我的答案以使其更准确。看看 jsfiddles，第二个使用你的确切 json。

【解决方案2】：

这可能是因为您的“角色”数据是格式错误的 json。它缺少一个闭合数组大括号。应该是：

{
"personas": [
    {
        "id": 0,
        "nombre": "Aurelia",
        "apellido": "Osborn",
        "email": "aureliaosborn@lovepad.com",
        "confirmado": false
    },
    {
        "id": 1,
        "nombre": "Curry",
        "apellido": "Jefferson",
        "email": "curryjefferson@lovepad.com",
        "confirmado": true
    }
  ]
}

【讨论】：

哦不，抱歉，确实有，我只是复制错了。