add new columns post-ajax request -- alter aoColumnDefs on the fly?

deanmalmgren

I have a situation in which I would like to initialize a table with a default single-column format, but I need to be able to extend the table to have more columns after data has been requested from the server (because sometimes there will be more than one column). From trying a few things, it seems like the best way to do this would be to alter the aoColumnDefs setting on the DataTables object on the fly, but I can't figure out how to do that:

[code]
// instantiate datatable
var datatable = $("#datatable").dataTable({
aaData: [["Abe"], ["Billie"], ["Charlie"]],
aoColumnDefs: [{aTargets: [0], sTitle: "Name"}]
});

// get data from server (simplifying for brevity, but you get the idea)
var aaData = [
["Abe", 1, 4, 5],
["Billie", 2, 7, 8],
["Charlie", 9, 2, 1],
];
var headers = ["Name", "Awesomeness", "Radicalness", "Dweebiness"];

// update datatables column headings
var i, aoColumnDefs = [];
for (i in headers) {
aoColumnDefs.push({aTargets: [i], sTitle: headers[i]});
}
var dt_settings = datatable.fnSettings();
// XXXX WHAT NEXT?!?!

// update data in table
// [snip] I already know how to do this
[/code]

How can you set the datatable settings post-instantiation? Is this the best way to accomplish this or is there a better way?

Thanks for your help!
Dean

allan

You currently can't change column definitions on-the-fly after initialisation. You would need an API function to set the title of the columns that you want to do so, so it can store it in the required sTitle column parameter, and also enact the change needed (i.e. write it into the DOM).

There is documentation on how to write plug-ins here: http://datatables.net/development/api and plenty of examples here: http://datatables.net/plug-ins/api (although not yet one that does exactly what you are looking for I'm afraid).

Allan