如何在不声明列的情况下从JSON数组创建jquery数据表

Question

我有以下代码，它从WebAPI获取JSON。(为了使问题更清楚，我将数组定义为来自web API的数据(。

我需要数据表是动态的，这就是我在运行时创建表头的原因。

这很好，但我在数据表上没有看到任何数据，并得到错误：

DataTables警告：table 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>

Answer 1

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>

也许您可以尝试根据数据创建列。然而，如果数据被更新，我想您需要以相同的方式刷新表

Answer 2

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 headerData = data[0];
var columns = [];
var $thead = $('#tableId').find('thead');
var tr = $("<tr>");
$thead.append(tr);
$.each(headerData, function(name, value) {
$(tr).append('<th>' + name + '</th>');
var obj = {'data': name};
columns.push(obj);
});
$('#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">
<thead>
</thead>
<tbody>
</tbody>
</table>

Answer 3

实际上不需要HTML操作或讨厌的jQuery。这一切都可以简化为：

<table id="tableId"></table>

var table = $('#tableId').DataTable({
data: data,
columns: Object.keys(data[0]).map(function(item) {
return { data: item, title: item }
})
}) 

http://jsfiddle.net/pz5hjv84/

Answer 4

由于无法识别列的名称，它抛出了错误。因此，必须设置datatable.js的columns属性才能显示数据。

尝试下面的片段：

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
}
];
let columns=[];
var $thead = $('#tableId').find('thead');
var tr = $("<tr>");
$thead.append(tr);
$.each(data[0], function(name, value) {
columns.push({data:name,name:name});
$(tr).append('<th>' + name + '</th>');
});
$('#tableId').DataTable({
data: data,
"destroy": true,
"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">
<thead>
</thead>
<tbody>
</tbody>
</table>

有关columns属性的更多信息，请访问此链接：js的列

更新1动态列标题的使用

column属性的data选项用于将列映射到给定的输入数据，而name属性用于设置字段的显示名称。稍后，destroy属性用于刷新table。有关destroy销毁的更多详细信息。