如何管理带有数据的动态表头的Datatable

Question

我正试图用控制器中的数据管理不同标题列名的Datatable。我正在从我的控制器发送带有表标题列名和表数据值的数据。我在drawCallback的cal变量中获取json中的列，但无法在列中获取cal的值。

这是我的控制器

$columns = array('<input class="checkbox" type="checkbox" name="selectall" id="bnselectall">', __('SL'), __('Start date'), __('End Date'), __('Event Name'),__('Aquisition Channels'),__('Status'),__('Views'),__('No of Products Sold'),__('Revenue'));
$data[] = array($checkbox,$sr++,$period_start_date,$period_end_date,$event_title,$aquisition_channel,$status,$no_of_views,$count,$currency." ".$actual_rate);
$results['draw'] = $draw;
$results['recordsTotal'] = $countAll;
$results['recordsFiltered'] = $countAll;
$results['data'] = $data;
$results['columns'] = $columns;
echo json_encode($results);
exit;

我的数据表ajax代码在这里

dataUsersbehaviour = $('#dataUsersbehaviour').DataTable({
"processing": dataTableConfig.processing,
"serverSide": dataTableConfig.serverSide,
"bFilter": dataTableConfig.bFilter,  
"bInfo": dataTableConfig.bInfo,
"autoWidth": dataTableConfig.autoWidth,
"paging": dataTableConfig.paging,
"dom": dataTableConfig.dom,
"pageLength": dataTableConfig.pageLength,
"pagingType": dataTableConfig.pagingType, 
"bSort" : dataTableConfig.bSort,
//"aDataSort": false,
"language": {
"url": dataTableConfig.language.url,
},
"ajax": {
"url":$('meta[name="_baseurl"]').attr('content')+"usersbehaviour/data",
"type":"post",
"headers":{
'X-CSRF-Token':$('[name="_token"]').attr('content')
},
"data": function(data) {
data.search.params = {};
data.search.params.from_date = $("#from_date").val();
data.search.params.to_date = $("#to_date").val();
data.search.params.user_behaviour_type = $("#user_behaviour_type").val();
data.search.params.events_id = $("#events_id").val();
data.search.params.product_type = $("#product_type").val();
data.search.params.signup_type_id = $("#signup_type_id").val();
},
},
"drawCallback": function (columns) { 
// Here the response
var response = columns.json;
var cal = response.columns;
//console.log(response.columns);
//$.each(response.columns, function(index, value) {
//console.log(index);
// columnsData[index] = value;
// Will stop running after "three"
//return (value !== 'three');
//});
//columnsDataget = JSON.parse( columnsData );
console.log(cal);
},
/*"columns": [
{ "title": "My column title" },
{"title": "My column title"},
null,
null,
null,
null,
null,
null,
null,
null
]*/
});

我的视图页面看起来像

<table id="dataUsersbehaviour" class="table" style="width: 100%;">

Answer 1

假设cal包含数据表的行数据，则可以循环数据并使用Jquery动态创建一行。然后将这些行追加到表中。

内部成功：

for(var i = 0; i < cal.length; i++) {
var $tblRow = $('<tr><td>' + cal[i]+'</td></tr>'); //correctly set your row
$('#dataUsersbehaviour').append($tblRow);
}