代码之家 › 专栏 › 技术社区 › Simsons

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

datatables jquery javascript

Simsons · 技术社区 · 7 年前

我有以下代码从web api中获取json(为了澄清这个问题,我将数组定义为webapi中的数据)。

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

这很好,但我在数据表上看不到任何数据并得到错误:

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>

4 回复 | 直到 7 年前

samabcde 7 年前

    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>

也许您可以尝试从数据创建列。但是,如果更新了数据,我想您需要以同样的方式刷新表。

Bhushan Kawadkar 7 年前

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>

vikscool 7 年前

它将引发错误,因为它无法识别列的名称。所以,你必须设置 columns 的属性 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动态列标题的使用

这个 data 选择权 column 属性用于将列映射到给定的输入数据,而 name 属性用于设置字段的显示名称。后来, destroy 属性用于刷新 table . 有关详细信息 破坏 destroy 。

davidkonrad 7 年前

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