javascript - 无法将数据从 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", "gender" : "Male"},
{"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 警告:table id=tab - Ajax 错误。有关此错误的更多信息,请参阅http://datatables.net/tn/7
我读到了这个错误,他们说它与 json 数据有关。我验证了结构,它很好。当我调试并在网络选项卡中看到 304 错误。我不知道我在这里缺少什么,我们将不胜感激。
解决方案
根据数据表示例Javascript 源数据,您不需要 ajax。所以你的代码变成:
var dataSet = {
"data" : [
{"name": "Zakaria dd", "mail" : "zak.m@sige.ma", "gender" : "Male"},
{"name": "Zakaria Nouamane", "mail" : "zak.n@sige.ma", "gender" : "Male"},
{"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>
推荐阅读
- jquery - 带有“;”的jQuery验证多个电子邮件 分隔器。?
- android - Kotlin 的 AlertDialog 中的不同颜色背景
- c++ - 如何中断 C++ 中的阻塞 accept() 调用?
- javascript - 使用 Amcharts 在生产环境中优化 React 应用程序的大小
- javascript - 输入值变化时如何触发函数
- api - 使用多种服务进行身份验证:只有一个 REST 调用还是多个调用?
- python - 如何快速将大量单词添加到 FuzzySet 中?
- react-native - 使用 Material UI 中的复选框时反应本机的不变违规
- r - R 如何将“yy-mmm”字符中的日期列转换为整数中的“yyyy”新列以进行图形可视化?
- swift - 使用 ReturnKey 重命名时更改 NSTextField 的背景颜色