如何解决无法将数据从JSON加载到数据表中
我正尝试加载存储在data.js文件中的JSON数据,如下所示:
var data = {
"data" : [
{"name": "Zakaria dd","mail" : "zak.m@sige.ma","gender" : "Male"},{"name": "Zakaria Nouamane","mail" : "zak.n@sige.ma",{"name": "Mohmaed Houd","mail" : "mohamed.h@sige.ma","gender" : "Male"}
]
}
我在script.js文件中调用数据变量:
$('#tab').dataTable( {
"processing": true,"ajax": data,"columns" : [
{"data" : "name"},{"data" : "mail"},{"data" : "gender"}
]
} );
这是我的html代码的结构:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css">
<link rel="stylesheet" href="style.css">
<title>Hello world</title>
</head>
<body>
<table id="tab" class="table table-striped table-bordered">
<thead>
<tr>
<th>Name</th>
<th>Mail</th>
<th>Gender</th>
</tr>
</thead>
</table>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<script src="data.js"></script>
<script src="script.js"></script>
</body>
</html>
在导航器中执行时,我收到此警报:
DataTables警告:表id = tab-Ajax错误。欲获得更多信息 有关此错误,请参见http://datatables.net/tn/7
我了解到此错误,他们说这与json数据有关。我验证了结构,这很好。调试时,在“网络”选项卡中,我看到304错误。我不知道我在这里想念的是什么,您的帮助将不胜感激。
解决方法
根据数据表示例Javascript sourced data,您不需要ajax。这样您的代码将变为:
var dataSet = {
"data" : [
{"name": "Zakaria dd","mail" : "zak.m@sige.ma","gender" : "Male"},{"name": "Zakaria Nouamane","mail" : "zak.n@sige.ma",{"name": "Mohmaed Houd","mail" : "mohamed.h@sige.ma","gender" : "Male"}
]
}
$('#tab').dataTable( {
"data": dataSet.data,"columns" : [
{"data" : "name"},{"data" : "mail"},{"data" : "gender"}
]
} );
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<table id="tab" class="table table-striped table-bordered">
<thead>
<tr>
<th>Name</th>
<th>Mail</th>
<th>Gender</th>
</tr>
</thead>
</table>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。