Question

我想使用动态列标题和列数据填充数据表。我可以成功填充动态列数据，但我无法实现动态列。我正在使用从JSON AJAX请求获得的数组。我的代码是这样的：

<body>
    <table id="example" class="display" cellspacing="0" width="100%" border="1"></table>
</body>

var JSONResult = '{"column1":"data1","column2":"data2","column3":"data3","columnN":"dataN"}';
var row_dtable = new Array();
var dtable_api = $('#example').dataTable();

$.each(JSONResult , function(key, value) {
    row_dtable.push(value);
}); 
dtable_api.api().row.add(row_dtable).draw(false);

提前致谢。

Answer 1

destroy无法在创建后更改其结构。您必须{{1}}，然后使用一组新列重新创建。

补充阅读：this page on the Camel site.

Answer 2

理想情况下，您的JSONResult将始终具有相同的列，并且仅数据将被更新。为此，解决方案将是在表的标题中创建一次columns，然后使用datatable API添加数据。

首先，您应该这样更改表格HTML ，这应该没问题。

<body>
 <table id="example" class="display" cellspacing="0" width="100%" border="1">
   <thead>
     <tr></tr>
   </thead>
 </table>
</body>

然后您通过jQuery创建标头

   var JSONResult = [{ "column1": "data1", "column2": "data2", "column3": "data3", "columnN": "dataN" },
            { "column1": "data1", "column2": "data2", "column3": "data3", "columnN": "dataN" }];

        $.each(JSONResult[0], function (key, value) {
            $('#example thead tr:first-child').append($('<th>', {
                text: key
            }));
        });

最后，将数据添加到dataTable

        var row_dtable = new Array();
        var dtable_api = $('#example').dataTable();
        $.each(JSONResult, function (i, l) {
            $.each(l, function (key, value) {
                console.log(key + " " + value);
                row_dtable.push(value);

            });
            dtable_api.api().row.add(row_dtable).draw(false);
        });

来自json数组的数据表中的动态列标题

2 个答案: