How to manage Datatable with dynamic header with data

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%;">

Dumal Aluthdeniya · Accepted Answer · 2020-07-23 11:52:41Z

0

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);
}

answered Jul 23, 2020 at 11:52

Dumal Aluthdeniya

1631 silver badge8 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to manage Datatable with dynamic header with data

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related