javascript - 如何在不声明列的情况下从 JSON 数组创建 jquery 数据表
问题描述
我有以下从 WebAPI 获取 JSON 的代码。(为了清楚问题,我已将数组定义为来自 Web API 的数据)。
我需要数据表是动态的,这就是我在运行时创建表头的原因。
这工作正常,但我没有看到数据表上的任何数据并得到错误:
DataTables 警告:表 id=tableId - 为第 0 行第 0 列请求未知参数“0”。有关此错误的更多信息,请参阅http://datatables.net/tn/4
var data = [{
"Number": "10031",
"Description": "GYPROCK PLUS RE 10MM 1200X4200",
"FarmLocation": "WH5",
"LocationIn": "LINE_1C2AA",
"Quantity": 18
},
{
"Number": "95844",
"Description": "CEMINSEAL WALLBOARD RE 6MM 1350X3000",
"FarmLocation": "WH5",
"LocationIn": "LINE_1C2AB",
"Quantity": 6
}
];
var $thead = $('#tableId').find('thead');
var tr = $("<tr>");
$thead.append(tr);
$.each(data[0], function(name, value) {
$(tr).append('<th>' + name + '</th>');
});
$('#tableId').DataTable({
data: data,
});
<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<table id="tableId" class="table table-condensed responsive">
<thead>
</thead>
<tbody>
</tbody>
</table>
解决方案
var data = [{
"Number": "10031",
"Description": "GYPROCK PLUS RE 10MM 1200X4200",
"FarmLocation": "WH5",
"LocationIn": "LINE_1C2AA",
"Quantity": 18
}, {
"Number": "95844",
"Description": "CEMINSEAL WALLBOARD RE 6MM 1350X3000",
"FarmLocation": "WH5",
"LocationIn": "LINE_1C2AB",
"Quantity": 6
}];
var $thead = $('#tableId').find('thead');
var tr = $("<tr>");
$thead.append(tr);
var columns = [];
$.each(data[0], function(name, value) {
var column = {
"data": name,
"title":name
};
columns.push(column);
});
$('#tableId').DataTable({
data: data,
columns: columns
});
<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<table id="tableId" class="table table-condensed responsive">
</table>
也许您可以尝试从数据中创建列。但是,如果数据更新,我想你需要以同样的方式刷新表
推荐阅读
- java - 在 beforeExecute 和 afterExecute 中检查自定义接口总是失败
- postgresql - PostgreSQL 递归/子集查询
- jquery - request.body 提供 nodemailer 的所有信息,但电子邮件
- django - 文件也在 pythonanywhere 服务器和用户笔记本电脑/个人电脑上下载。如何限制在 pythonanywhere 服务器上写入
- lua - 如何在 Lua 中转义多行字符串中的括号
- docker - Docker 容器中的 TCP 数据包流与主机系统相比
- c++ - main.cpp:28:28: 错误: 'operator[]' 不匹配(操作数类型是'std::unordered_map' 和'line')slopeno[q]++;
- javascript - 为什么不输入 catch
- angular - 是否可以从循环依赖链检查中删除文件?
- database - 如何在填写表单的其余部分时在访问中创建一个更新的字段