Reload datatable with dynamic header

nicoferr

Hello !

I have a little situation. I created a datatable that get the information I need from the server. I have a drop-down list which reload the datatable on its "change" event. The header of the datatable must change along with the drop-down list, so the "aoColumns" option is given an array. I also set the "bDestroy" option to "true", so that when I call the dataTable constructor again, it creates a new dataTable with the new settings. I used other arrays for other options and it works perfectly, but not for the header. Here's the code :

// I create the header with the data I get from ajax
var arrayHeader = [];
arrayHeader.push({"sTitle": "Date"});
for(var i = 0; i < data.length; i++){
     arrayHeader.push({"sTitle": data[i]});
}

$("#datatable1").dataTable({
            "bProcessing": true,
            "bServerSide":true,
             "sAjaxSource": "MY_PHP_FILE",
            "bDestroy": true,
                        // The array I want to use to create the header
            "aoColumns": arrayHeader
});

On the first creation, it's okay my header is : "Date | Amazon | Average"
When I want to add "Google", the arrayHeader contains the right data => Date, Amazon, Google, Average
but the header still displays "Date | Amazon | Average" while the data are correctly uploaded...

What did I do wrong ?

(Sry if I'm not clear on my explanations, don't hesitate to ask more information)