如何使用动态 header 和数据管理 Datatable

Question

I am trying to manage Datatable for different header column names with data from my controller.I am sending data from my controller with table headers column name and table data value.I am getting columns in json in cal variable of drawCallback but can't get value of cal in columns.

Here is my controller

$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;

My ajax code for datatable is here

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
  ]*/
});

My view page looks like

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

Answer 1

Assuming cal contains row data for your data table, you can loop your data and dynamically create a row with Jquery. Then append that rows to the table.

inside success:

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