How to recreate columns on existing table?

adsood

Hi Allen,

I am looking for a way to control table columns programmatically.
New columns can be added or some columns removed during the lifecycle of the DataTable.
Lets say, column definitions come with the data from the server-side.

When page loads I use the following markup and script to initialize the table.
[code]




$(document).ready(function() {
$('#boo').dataTable({
"aoColumns": [
{ "sTitle": "id" },
{ "sTitle": "size" }
]
});
});

[/code]

The above fragment works fine. All columns get created.

Later, I load more data to display and may need to extend the column set.
All attempts to load new column set on the existing instance of dataTable ended up with error message like "added data does not match number of columns".

If I destroy the table, the data get inserted and displayed.
However, the header displays only first two columns that were originally created on page load.
The last column exists but does not have header.

Here is the snipped I use to destroy/recreate table:
[code]
var oTable = $('#boo').dataTable();
oTable.fnDestroy();

$('#boo').dataTable({
"aoColumns": [
{ "sTitle": "id" },
{ "sTitle": "name" },
{ "sTitle": "size" }
],
"aaData":
[
["1", "goo", 10022],
["2", "doo", 30220],
["3", "moo", 12022],
["4", "roo", 20022]
]
});
[/code]

How do I recreate columns on the dataTable?
Thanks.

allan

Dynamically inserting and removing columns isn't something that is currently supported as a publicly accessible function at the moment - it is possible to create an API function which will do this, and while I do intend to do this at some point, I've not have time to do so yet...!

So - basically the way to get around this is as you are currently using - destroy the table and then create a new one with the same data. The way to get the data from a current DataTables is to use fnGetData ( http://datatables.net/api#fnGetData ). That will give you a 2D array which you could then manipulate to add your new column, then use that array for the aaData source for the new table. You could potentially do something similar for aoColumns, although for that I would suggest keeping a local array which you can modify as you need, rather than trying to read it back from DataTables.

Regards,
Allan

adsood

Thanks for the quick response.

I found a way around that seems to work:

After the table is destroyed I use jQuery to clear all markup related to the table:
[code]
$('#books thead').empty();
$('#books tbody').empty();
$('#books tfoot').empty();
[/code]
Then I recreate table using both "aoColumnDefs" and "aoColumns" definitions.

I will also need to remember and restore the state of the grid (sorting, paging, selected row if any...).


To have an API to setup columns defunitions without destroyng table, would be a great help.
And any conflict between actual data and columns would be resolved in favour of the columns definition:
extra data is ignored, missing data is displayed as empty cell.

Also, the dual concept of columns definition ("aoColumnDefs" and "aoColumns") is a bit confusing.
API to set columns dynamically can naturally bring the two together under one roof.

I hope to see this functionality in public API soon.

Thanks,
Andrew