使用DataTables的Javascript JSON数据
我正在使用一个带有jQuery DataTables的JavaScript，但是我在将JSON数据加载到Bootstrap表中时遇到了问题。
这是该表的示例
[ { name: 'Bryant Stone', hobbies: 'Football', favorite_team: 'Sea hawks', height: '5 Feet 10 in' },
{ name: 'Jesse Smith', hobbies: 'boxing', favorite_team: 'Spurs', height: '6 feet 6 in' },
{ name: 'Emily Wyclef', hobbies: 'cooking', favorite_team: 'Venus Williams', height: '5 feet 2 in' }
]在JavaScript中，我以这种格式获取数据，并将其放入JavaScript中，如下所示
$(document).ready(function(){
$(\'#respondent\').dataTable({
destroy: true,
data: jsonStr1,
columns:[
{title:"Name", data: "name"},
{title:"Hobbies", data: "hobbies"},
{title:"Favorite team" ,data: "favorite_team"},
{title: "Height" ,data: "height"}
]
});
})当我加载页面时，它会在控制台中显示我的数据，但DataTables对话框会显示以下消息
DataTable warning table id=respondent-
Requested unknown parameter 'name' for
row0, column 0. For information more.....我不知道我还能做什么。它花了我一整天的时间。任何帮助都将不胜感激。
更新感谢所有人的帮助，他们提供了一些我所做的答案。这是我的html
<table class="display" id="respondent">
<thead>
<tr>
<th>Name</th>
<th>Hobbies</th>
<th>Favorite Team</th>
<th>Height</th>
</tr>
</thead>
</table>我已经对前面显示的代码进行了必要的拼写更正，但我仍然收到这个错误消息
DataTables warning: table id=respondent-
Requested unknown parameter 'name' for
row 0, column 0, for more information about this
error, please see http://datatables.net/tn/4我去了那个链接，但是找不到任何有用的东西。在上面的消息之后，表格被空格填满，在转到一些页面后，我只在第一个单元格中看到一个字符。这些字符是字母还是大括号，我不知道它们来自哪里，因为我在json数据中看不到这样的序列，甚至数字也会显示出来。它一直困扰着我，我不知道还能做什么。任何帮助都将不胜感激。
UPDATE我发现问题在于数据是在字符串中。有谁知道如何不使用eval()将javascript中的字符串转换为object。JSON.parse返回字符串，而不是正在查找的object。
回答 2
Stack Overflow用户
发布于 2018-08-24 03:48:29
较小的更改：
在作为favourite_team (英式英语)传递data option
- 列之后缺少
,，但数据包含favorite_team( favorite_team hobbies )，其中as data在第一行包含hobbies，而hobbie位于其他行。您必须匹配它们。- 在列中使用
title选项来显示标题名称
信息:该错误/警报通常是由于数据中缺少列造成的。
以下是修复上述问题的代码片段：
$(document).ready(function(){
var jsonStr1 = [ { name: 'Bryant Stone', hobbies: 'Football', favorite_team: 'Sea hawks', height: '5 Feet 10 in' },
{ name: 'Jesse Smith', hobbies: 'boxing', favorite_team: 'Spurs', height: '6 feet 6 in' },
{ name: 'Emily Wyclef', hobbies: 'cooking', favorite_team: 'Venus Williams', height: '5 feet 2 in' }
];
$('#respondent').dataTable({
destroy: true,
data: jsonStr1,
columns:[
{title: "name", data: "name"},
{title: "hobbies", data: "hobbies"},
{title: "favorite_team", data: "favorite_team"},
{title: "height", data: "height"}
]
});
})<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.18/datatables.min.css"/>
<script src="//cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<table id="respondent" class="display">
<thead>
</thead>
<tbody>
</tbody>
</table>
希望这能有所帮助。
Stack Overflow用户
发布于 2018-08-24 03:50:28
列名的拼写错误--兴趣被称为"hobbie“，favourite_team被称为favorite_team。
为所有对象维护相同的属性名称以避免该错误
可供参考的代码示例- https://codepen.io/nagasai/pen/vzNXPe
HTML：
<table class="display" id="respondent">
<thead>
<tr>
<th>Name</th>
<th>Hobbies</th>
<th>Favorite Team</th>
<th>Height</th>
</tr>
</thead>
</table>JS
var jsonStr1 = [ { name: 'Bryant Stone', hobbies: 'Football', favorite_team: 'Sea hawks', height: '5 Feet 10 in' },
{ name: 'Jesse Smith', hobbies: 'boxing', favorite_team: 'Spurs', height: '6 feet 6 in' },
{ name: 'Emily Wyclef', hobbies: 'cooking', favorite_team: 'Venus Williams', height: '5 feet 2 in' }
]
$(document).ready(function() {
$('#respondent').dataTable({
destroy: true,
data: jsonStr1,
columns:[
{title:"Name", data: "name"},
{title:"Hobbies", data: "hobbies"},
{title:"Favorite team" ,data: "favorite_team"},
{title: "Height" ,data: "height"}
]
});
} );https://stackoverflow.com/questions/51993007
复制相似问题