jquery - DataTables根据输入json对象获取字段标题

Question

我正在尝试从 json 对象创建 DataTables 对象(以下 this 示例)。我可以假设输入是一个对象数组，每个对象都具有相同的键集。

我想创建一个表格，从输入的第一行动态获取其列标题。

请参阅下面的 js 函数

 function populateDataTable(json_obj) {
/*extract fields from ajax return*/
var columns_obj = [];
for (var key in json_obj[0]) {
  columns_obj.push({
    'data': key
  })
}
console.log(columns_obj);

/*draw html table container*/
var html_table = '<table id="example" class="display" width="100%" cellspacing="0"><thead><tr>';
for (var i = 0; i < columns_obj.length; i++) {
  html_table += '<th>' + columns_obj[i]['data'] + '</th>';
}
html_table += '<tr></thead></table>';
console.log(html_table);
$('#query_output').html(html_table);
console.log('columns_obj:', columns_obj.length, 'ajax data length:', Object.keys(json_obj[0]).length);
console.log($('#query_output th').length);
alert('pause');
$('#query_output table').DataTable({
  data: json_obj,
  columns: columns_obj
});

}

在我的 fiddle 中，与我的预期相反，数据完全分配给单个字段标题“名称”。请注意，运行它会扰乱 fiddle 的沙箱。

JS Fiddle

Answer 1

我让数据表比你做了更多的工作，并想出了这个:

http://jsbin.com/zeminu/edit?html,js,console,output

    $(function () {

        /* user  run query click event*/
        $('#run_query').click(function () {
            populateDataTable(sample_ajax);
        });

        function populateDataTable(json_obj) {
            console.log(json_obj)
            /*extract fields from ajax return*/
            var keys = Object.keys(json_obj[0]);
            var columns_obj = [];
            $.each(keys, function (i, it) {
                columns_obj[i] = { data: it, title: it };
            });


            /*draw html table container*/
            var html_table = '<table id="example" class="display" width="100%" cellspacing="0"><thead></thead><tbody></tbody></table>';

            $('#query_output').html(html_table);

            $('#query_output table').DataTable({
                data: json_obj,
                columns: columns_obj
            });
        }
    });