1

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?

9
  • Why don't you know the data? It is either a dynamic input, from a form of some kind, or as part of the AJAX request. You should be able to get the headers.
    – glend
    Jul 10, 2015 at 11:32
  • since the number of column fields as well as their names will change. I can loop through in the json file though to find out their number as I've demonstrated in the example above. However, I don't know how to assign that to the columns field after
    – george
    Jul 10, 2015 at 13:02
  • If the headers are changing, then the data is too. Why wouldn't you just re-create the table?
    – glend
    Jul 10, 2015 at 13:08
  • does that mean that I will have to build the table dynamically by appending tr and tds and then call datatables?
    – george
    Jul 10, 2015 at 13:35
  • No necessarily, there may be another way. Just giving you other options.
    – glend
    Jul 10, 2015 at 13:38

1 Answer 1

0

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
5
  • I can't do it since I don't know neither the names nor the number of columns beforehand.
    – george
    Jul 10, 2015 at 14:16
  • so what is building out your column headers for the table? Jul 10, 2015 at 14:20
  • well I can know the headers in the ajax response. Your code is similar to what I've pasted above. I can push the headers to the array in the ajax but then I can't assign this array to the datatables "columns" setting for some reason. Probably because its asynch
    – george
    Jul 10, 2015 at 14:24
  • You example is just trying to tell DataTables what the bindings for the column's are. It is not creating the header columns. I actually just looked at the DataTable docs and it looks like you can use the html5 attribute data-class-name on the th that DataTables will automatically read and that would negate my whole example above. The object you are sending into the DataTables constructor is already bound before your update your array from your ajax call. It is only seeing the empty array and would produce a js error. Jul 10, 2015 at 14:39
  • I don't know neither the header names nor the their count before my ajax request. I can know this info only in the ajax response where I it will be too late to construct the th of the table since I should have already assigned some value to the "column" feature of datatables. If I want to follow your approach I need to get the data with ajax first and then construct the table which is the same as nuking the table and recreating it but my intention is to build the table within the same ajax call as above.
    – george
    Jul 10, 2015 at 15:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.