gpt4 book ai didi

javascript - JQuery DataTables - 不显示数据

转载 作者:搜寻专家 更新时间:2023-11-01 05:28:32 25 4
gpt4 key购买 nike

我正在尝试设置 jQuery 数据表。我只需要在表中显示一些 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 warning: table id=table - Requested unknown parameter 'name' for row 0, column 0.

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

最佳答案

类型应该是一个数组。请参阅 data option 文档中的类型 标题:

Description

DataTables can obtain the data it is to display in the table's body from a number of sources, including being passed in as an array of row data using this initialisation parameter. As with other dynamic data sources, arrays or objects can be used for the data source for each row, with columns.data employed to read from specific object properties.

Type

This option can be given in the following type(s):

array | Type 1

您看到的错误是数据表代码试图将单个对象作为数据数组处理的结果。

所以不是从 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>


1 https://datatables.net/reference/option/data

关于javascript - JQuery DataTables - 不显示数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42639372/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com