Question

我有以下代码从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>

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

由于无法识别列名而引发错误。因此，您必须设置columns的{{1}}属性才能显示数据。

尝试以下代码段：

datatable.js

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>属性的更多信息，请通过以下链接： datatable.js's columns

更新1使用动态列标题

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

Answer 4

实际上不需要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/

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

4 个答案: