[英]Javascript JSON data with DataTables
我在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"}
]
});
})
当我加载页面时,它会在控制台中显示我的数据,但“数据表”对话框会显示此消息
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数据中看到这样的序列。 它一直困扰着我,我不知道该怎么办。 任何帮助,将不胜感激。
更新我发现问题在于数据在字符串中。 有谁知道如何在不使用eval()的情况下将javascript中的字符串转换为对象。 JSON.parse返回字符串,而不是要查找的对象。
小改动:
,
data
选项后缺失 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>
希望这可以帮助。
列名的错字错误-爱好是提到“霍”和FAVOürite_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"}
]
});
} );
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.