DataTables未显示JSON数据

时间:2017-10-11 07:48:49

标签: javascript jquery html json datatable

这是我的HTML

<table id="dt">
    <thead>
        <tr>
            <th>make</th>
            <th>model</th>
            <th>serial</th>
            <th>status</th>
            <th>User</th>
            <th>dept</th>
            <th>location</th>
    </thead>
    <tbody>

    </tbody>
    <tfoot></tfoot>
</table>

这是我的JS

<script type="text/javascript" language="javascript" >

    $(document).ready(function() {

        $.post("json.php",function(data){
            $('#dt').DataTable( {
                "aaData": data,
                "aoColumns": [
                        {"mDataProp": "make"},
                        {"mDataProp": "model"},
                        {"mDataProp": "serial"},
                        {"mDataProp": "status"},
                        {"mDataProp": "user"},
                        {"mDataProp": "dept"},
                        {"mDataProp": "location"}
                    ]
            });
        });

    } );
</script>

这是json.php

$data = Array ();
$data[] = array("make" => "Hp", "model" => "jhbh", "serial" => "kjkhn", "status" => "active", "user" => "John Doe", "dept" => "Manufacturing Services", "location" => "Bindura");
$data[] = array("make" => "Dell", "model" => "Vostro", "serial" => "kjkhn", "status" => "active", "user" => "Percy Holdin", "dept" => "Manufacturing Services", "location" => "Kwekwe");

echo json_encode($data,JSON_PRETTY_PRINT);

我对这个问题进行了编辑,因为现在我想得到动态数据。

错误:

DataTables warning: table id=dt - Requested unknown parameter 'make' for row 0, column 0. For more information about this error, please see http://datatables.net/tn/4

但我没有从帮助链接中找到任何有用的东西

5 个答案:

答案 0 :(得分:0)

你JSON应该只是:

[
        {
            "make":"Hp",
            "model":"jhbh",
            "serial":"kjkhn",
            "status":"active",
            "user":"John Doe",
            "dept":"Manufacturing Services",
            "location":"Bindura"
        }

    ]

答案 1 :(得分:0)

JSON格式应如下例所示:https://datatables.net/examples/data_sources/ajax.html

{
    "data": [
        [
            "Hp",
            "jhbh",
            "kjkhn",
            "active",
            "John Doe",
            "Manufacturing Services",
            "Bindura"
        ]
    ]
}

如何在php(好吧,单向)中格式化json的示例:

$data = (object) [
    'data' => [[
        'test',
        'test',
        'test'
    ]]
];
echo json_encode($data);

直播示例:http://sandbox.onlinephpfunctions.com/code/632c288c6c743da25e49958c204a8d4e0a936b54

答案 2 :(得分:0)

您的数据应如下所示:

{
  "data": [
    [
      "Hp",
      "jhbh",
      "kjkhn",
      "active",
      "John Doe",
      "Manufacturing Services",
      "Bindura"
    ]
  ]
}

答案 3 :(得分:0)

正如其他人在评论中已经提到的那样,dataTables需要表格的特定HTML结构。

查看文档中的示例: https://datatables.net/examples/basic_init/zero_configuration.html

表格应如下所示:

<table id="example" class="display">
  <thead>
    <tr>
        <th>Name</th>
        <th>Position</th>
        <th>Office</th>
        <th>Age</th>
        <th>Start date</th>
        <th>Salary</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

编辑:也许此要求已过时。似乎dataTables现在可以自己插入tbody-tag

返回的jsonData应该有这样的结构 https://datatables.net/examples/ajax/simple.html

{
  "data": [
      [
        "Hp",
        "jhbh",
        "kjkhn",
        "active",
        "John Doe",
        "Manufacturing Services",
        "Bindura"
      ]
  ]
}

答案 4 :(得分:0)

我从 PHP 获取 JSON:

echo json_encode($arr);

数组缺少一些键,例如:1,2,3,10,122... 由于缺少键,dataTable 插件不会在表中显示数据。 所以我像这样更改了代码:

array_multisort($arr);
echo json_encode($arr);

multisort 后,key 被重置,应该不会有任何丢失的 key。