Question

我正在尝试设置jQuery DataTables。我只需要在表格中显示一些JSON数据。

这是我的JS代码。我知道 myObj 已经是一个JSON对象，但我通过JSON.stringify传入是安全的，因为我对此失去了理智。

var myObj = { "name":"John", "age":31, "address":"123 Street","city":"New York" };
var data = JSON.stringify(myObj);

$(document).ready(function() {
    $('#table').DataTable( {
        "ordering": true,
        "data": data,
        "searching": false,
        "columns": [
          {'data':'name'},
          {'data':'age'},
          {'data':'address'},
          {'data':'city'}
        ]

    });
});

HTML代码：

  <html>
        <head>
        <link href="assets/css/bootstrap.min.css" rel="stylesheet">
            <link href="assets/css/style.css" rel="stylesheet">
            <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs-3.3.7/jq-2.2.4/dt-1.10.13/b-1.2.4/b-html5-1.2.4/b-print-1.2.4/fh-3.1.2/r-2.1.1/sc-1.4.2/datatables.min.css" />
        </head>
    <body>
        <table id="table" class="table table-hover">
                    <thead>
                        <tr>
                            <th>name</th>
                            <th>age</th>
                            <th>address</th>
                            <th>city</th>
                        </tr>
                    </thead>
                </table>
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
            <script src="assets/js/bootstrap.min.js"></script>
            <script type="text/javascript" src="https://cdn.datatables.net/v/bs-3.3.7/jq-2.2.4/dt-1.10.13/b-1.2.4/b-html5-1.2.4/b-print-1.2.4/fh-3.1.2/r-2.1.1/sc-1.4.2/datatables.min.js"></script>
  <script src="assets/js/dataLoader.js"></script>
    </body>
    </html>

我不是最好的格式化，但你明白了。上面的JS代码位于dataLoader.js文件中。问题是我在运行html文件时遇到此dataTables错误。

DataTables警告：table id = table - 请求的未知参数＆＃39; name＆＃39;对于第0行，第0列。

我真的很困惑为什么它不知道 name 是什么。如果我运行console.log(data.name)，则会返回 John 。为什么不显示数据？

Answer 1

该类型应为数组。请参阅data option的文档中的类型标题：

描述

DataTables可以从许多来源获取要在表格中显示的数据，包括使用此初始化参数作为行数据数组传入。与其他动态数据源一样，数组或对象可用于每行的数据源，columns.data用于读取特定对象属性。

类型

此选项可以使用以下类型给出：

array | Type   ¹

您看到的错误是数据表代码尝试将单个对象用作数据数组的结果。

因此，不要将JSON.stringify()的值分配给data，而是将data设为包含 myObj 的数组（并且将来可以添加更多对象）到那个数组）：

var data = [myObj];

请参阅下面的更改：

＆＃13;

var myObj = { "name":"John", "age":31, "address":"123 Street","city":"New York" };
var data = [myObj];//JSON.stringify(myObj);

$(document).ready(function() {
    $('#table').DataTable( {
        "ordering": true,
        "data": data,
        "searching": false,
        "columns": [
          {'data':'name'},
          {'data':'age'},
          {'data':'address'},
          {'data':'city'}
        ]

    });
});

＆＃13;

<link href="assets/css/bootstrap.min.css" rel="stylesheet">
            <link href="assets/css/style.css" rel="stylesheet">
            <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs-3.3.7/jq-2.2.4/dt-1.10.13/b-1.2.4/b-html5-1.2.4/b-print-1.2.4/fh-3.1.2/r-2.1.1/sc-1.4.2/datatables.min.css" />
        <table id="table" class="table table-hover">
                    <thead>
                        <tr>
                            <th>name</th>
                            <th>age</th>
                            <th>address</th>
                            <th>city</th>
                        </tr>
                    </thead>
                </table>
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
            <script src="assets/js/bootstrap.min.js"></script>
            <script type="text/javascript" src="https://cdn.datatables.net/v/bs-3.3.7/jq-2.2.4/dt-1.10.13/b-1.2.4/b-html5-1.2.4/b-print-1.2.4/fh-3.1.2/r-2.1.1/sc-1.4.2/datatables.min.js"></script>

＆＃13;

¹ <子> https://datatables.net/reference/option/data

Answer 2

数据不在数组中。
你不必进行字符串化，它已经是字符串。

以下是工作示例：

＆＃13;

var myObj = [{ "name":"John", "age":31, "address":"123 Street","city":"New York" }];


$(document).ready(function() {
    $('#table').DataTable( {
        "ordering": true,
        "data": myObj,
        "searching": false,
        "columns": [
          {'data':'name'},
          {'data':'age'},
          {'data':'address'},
          {'data':'city'}
        ]

    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

            <script type="text/javascript" src="https://cdn.datatables.net/v/bs-3.3.7/jq-2.2.4/dt-1.10.13/b-1.2.4/b-html5-1.2.4/b-print-1.2.4/fh-3.1.2/r-2.1.1/sc-1.4.2/datatables.min.js"></script>
 
 <table id="table" class="table table-hover">
                    <thead>
                        <tr>
                            <th>name</th>
                            <th>age</th>
                            <th>address</th>
                            <th>city</th>
                        </tr>
                    </thead>
                </table>

＆＃13;

Answer 3

你可以试试这个：

var myObj = [{ "name":"John", "age":31, "address":"123 Street","city":"New York" }];
$(document).ready(function() {
$('#table').DataTable( {
    "ordering": true,
    "data": myObj, //should be an object.
    "searching": false,
    "columns": [
      {'data':'name'},
      {'data':'age'},
      {'data':'address'},
      {'data':'city'}
    ]

});

JQuery DataTables - 不显示数据

HTML代码：

3 个答案:

描述

类型