Jquery datatables does not display the column headers

Question

This is linked to the question here . However, my case is a bit different. I would like to implement the same datatables example from the other question which is here . As you can see you have to pass the column names to be able to initialize the table headers like below

 "columns": [
        { "data": "name" },
        { "data": "position" },
        { "data": "office" },
        { "data": "extn" },
        { "data": "start_date" },
        { "data": "salary" }
    ]

The problem is that I would not know the header names beforehand as they will change. I've tried initializing the column names when I get the data from ajax like below using a 3rd variable (see where it says 'pay attention to this line' but this doesn't work.

            //PAY ATTENTION TO THIS LINE
            var columnsHeaders = [];


      var ab = $('#dynamicScenarioTable').DataTable({
              "bDestroy": true,
              "dom": 'T<"clear">lfrtip',
              "ajax": {
                    "type": "POST",
                    "url": "dynamicScenario.htm",
                    "data": tags,
                    "dataType": "json",
                    "dataSrc": function(json){
                          //PAY ATTENTION TO THIS LINE
                          columnsHeaders.push({"data": json.header });
                          return json.vals;
                    },
                    "error": function(exception)
                    {
                       displayMessageOnError();
                    }
               },  
                //PAY ATTENTION TO THIS LINE
               "columns":  [columnsHeaders],

               tableTools: tableDefaultS.tableTools
      });

Any ideas?

Answer 1

You can add a data-source attribute to the TH tags that are built on your table header. You can then have jQuery read those and construct the array to send into the DataTable constructor.

<tr>
    <th data-source="name">Name</th>
    <th data-source="position">Postion</th>
    <th data-source="start_date">Start Date</th>
</tr>

Then in your JavaScript do something like this to construct the array

var columnsHeaders = [];
$("#dynamicScenarioTable thead th").each(function() {
    colmnsHeaders.push(
        {
            data : $(this).data("source")
        }
    );
});

// construct your DataTable after this