DataTables根据输入的json对象获取字段头

时间:2017-03-30 00:59:04

标签: jquery datatables

我试图从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
});

}

在我的小提琴中,与我的期望相反,数据完全分配给单个字段标题&#39; name&#39;。请注意,用小提琴的沙盒来处理这个混乱。

JS Fiddle

1 个答案:

答案 0 :(得分:3)

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

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

     value1: string; //how to pass selected_dog value to component2's value1.