首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >DataTables没有显示JSON数据

DataTables没有显示JSON数据
EN

Stack Overflow用户
提问于 2017-10-11 07:48:48
回答 4查看 2.7K关注 0票数 3

这是我的HTML

代码语言:javascript
复制
    <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

代码语言:javascript
复制
    <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

代码语言:javascript
复制
    $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);

我已经对这个问题做了一个编辑,因为现在我想得到动态数据。

错误:

代码语言:javascript
复制
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

但是我没有从那个帮助链接中找到有用的东西。

EN

回答 4

Stack Overflow用户

回答已采纳

发布于 2017-10-11 08:00:08

JSON格式应该如下所示:sources/ajax.html

代码语言:javascript
复制
{
    "data": [
        [
            "Hp",
            "jhbh",
            "kjkhn",
            "active",
            "John Doe",
            "Manufacturing Services",
            "Bindura"
        ]
    ]
}

关于如何在php中格式化这样的json的示例(嗯,一种方法):

代码语言:javascript
复制
$data = (object) [
    'data' => [[
        'test',
        'test',
        'test'
    ]]
];
echo json_encode($data);

和活生生的例子:http://sandbox.onlinephpfunctions.com/code/632c288c6c743da25e49958c204a8d4e0a936b54

票数 1
EN

Stack Overflow用户

发布于 2017-10-11 08:01:19

您的数据如下所示:

代码语言:javascript
复制
{
  "data": [
    [
      "Hp",
      "jhbh",
      "kjkhn",
      "active",
      "John Doe",
      "Manufacturing Services",
      "Bindura"
    ]
  ]
}
票数 0
EN

Stack Overflow用户

发布于 2017-10-11 08:14:02

正如其他人在注释中已经提到的那样,dataTables需要表的特定。

查看Docs:configuration.html中的示例

表应该如下所示:

代码语言:javascript
复制
<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标记了。

返回的jsonData应该有一个类似于https://datatables.net/examples/ajax/simple.html的结构

代码语言:javascript
复制
{
  "data": [
      [
        "Hp",
        "jhbh",
        "kjkhn",
        "active",
        "John Doe",
        "Manufacturing Services",
        "Bindura"
      ]
  ]
}
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/46682669

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档