JQuery DataTables - 不顯示數據

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 - 第0行第0列的請求的未知參數'name'。

我真的很困惑，為什么它不知道名字是什么。 如果我運行console.log(data.name)它將返回John 。 為什么不顯示數據？

Answer 1

類型應該是一個數組。 請參閱數據選項文檔的“ 類型”標題：

描述

DataTables可以從許多來源獲取要在表格中顯示的數據，包括使用此初始化參數作為行數據數組傳入。 與其他動態數據源一樣，數組或對象可用於每行的數據源，其中columns.data用於從特定對象屬性讀取。

類型

此選項可以使用以下類型給出：

數組| 輸入 ¹

您看到的錯誤是數據表代碼嘗試將單個對象用作數據數組的結果。

因此，不是將JSON.stringify()的值JSON.stringify() data ，而是將data作為包含myObj的數組（將來可以將更多對象添加到該數組中）：

var data = [myObj];

請參閱以下應用的更改：

 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'} ] }); });

 <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>

¹ _{https://datatables.net/reference/option/data}

Answer 2

數據不在數組中。
你沒有字符串化，它已經在字符串中。

這是工作示例：

 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'} ] }); });

 <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>

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 個解決方案

解決方案1
5 已采納 2017-03-07 03:13:26

描述

類型

解決方案2
1 2017-03-07 03:19:33

解決方案3
0 2017-03-07 03:05:27

JQuery DataTables - 不顯示數據

問題描述

HTML代碼：

3 個解決方案

解決方案1 5 已采納 2017-03-07 03:13:26

描述

類型

解決方案2 1 2017-03-07 03:19:33

解決方案3 0 2017-03-07 03:05:27

解決方案1
5 已采納 2017-03-07 03:13:26

解決方案2
1 2017-03-07 03:19:33

解決方案3
0 2017-03-07 03:05:27