Dynamically add/remove columns -> DataTables warning. Requested unknown parameter...

robertbrower

Hello Allen.

I am using a js array and passing it into dataTables using the aaData option. When my page loads, aaData contains 5 columns of data. When I initialize my datatable, I pass in aaData and aoColumnDefs which also contains 5 elements.

When the user clicks on an element in the list on the left, I retrieve data from the server using $.ajax(). The data is returned as an array of values. The values are pushed into each corresponding row of aaData and a new column definition is pushed into aoColumnDefs.

I then use the modified aaData and aoColumnDefs (containing the new elements) to initialize my datatable after I completely destroy it using fnDestroy().

Adding columns dynamically works very well in this scenario.

I am using fnDrawCallback to bind a handler to the click event of a span element that is contained within the sTitle property of column. When the span is clicked, I remove the column from both aaData and aoColumnDefs and I reinitialize my datatable using the new options for aaData and aoColumnDefs after the previous datatable is destroyed via fnDestroy and the table markup is replaced.

I am having trouble understanding why I am getting the infamous DataTables warning. Requested unknown parameter... warning since I am destroying my datatable, replacing any existing table markup in my table container, and calling .dataTable() to initialize a completely new data table using the modified aaData and aoColumnDefs arrays.

Debug link:

http://debug.datatables.net/adicin

This is really important to me. I hope you can help.

Many, many thanks.

Robert

allan

> Dynamically add/remove columns

Before answering your question - for anyone else reading this, to be clear there is no ability in DataTables at this time to dynamically add and remove columns. This is a workaround destroying the table and then creating a new one. The ability to add and remove columns dynamically is a target for v1.11, but I hope to sneak it into v1.10.

Having said that, this method will work, as long at you are basically refreshing the whole table. In your debug trace you have 8 columns in the table, with the last item in each row array being null. That's why you are getting the error.

You have `aTargets` for columns 0-5 and 7, should that be 0-6?

Allan

robertbrower

I love the datatable debug applet you provided to us, and this plugin. And, I like you very much too =)

You are correct. My code does not re-sequence the aoColumnDefs's aTargets based on the new information that a column has been deleted. I'm going to fix it now. I'll let you know.

Thank you Allen!!!

robertbrower

Sweetness. Allen is the man.

allan

> I love the datatable debug applet you provided to us, and this plugin. And, I like you very much too =)

Hah - thanks :-). I'm quite proud of the debug bookmarklet - I use it all the time myself!

Good to hear it helps get this sorted.

Regards,
Allan

zanedev

Seems like there is a lot of interest in adding/removing columns. Robertbrower/Allan, do you mind sharing your code or answering the stack overflow question with some tips here: http://stackoverflow.com/questions/12405032/add-remove-columns-in-datatables? Thanks.

tristanvanbokkem

Yeah, I would love to add columns dynamically too. Its a feature we really would like to see in 1.10 :)

allan

Not sure it will make it into 1.10 to be honest, although I hope it will. I've still to prototype it and see how much time it will take.

Allan

robertbrower

I add a new columns by recreating the whole datatable which is not recommended. But here's roughly how I do it:

1. Get column data via ajax

2. Push new column def:

aoColumnDefs.push({
"aTargets": [aoColumnDefs.length]
, "sTitle": sTitle
, "bSearchable": true
, "bVisible": true
, "bSortable": false
, "sClass": "recipe"
});

3. Push new row data into aaData:

$.each(aaData, function (i, rowData) {
rowData.push(newColData[rowData[1]] == undefined ? '' : newColData[rowData[1]]);
});

4. reinitialize DataTable

Removing a column:

1. Get the index into aaData and aoColumnDefs of the column to remove by the column index of the column to remove:

var dataIndex = myConstants.numFixedColumns + index;

2. Remove array element at the index obtained in #1.

$.each(aaData, function (i, data) {
data.splice(dataIndex, 1);
});

3. Resequence aTargets:

$.each(aoColumnDefs, function (i, column) {
column.aTargets = [i];
});

4. reinitialize DataTable

ericlat

[quote]allan said: The ability to add and remove columns dynamically is a target for v1.11, but I hope to sneak it into v1.10[/quote]

Is or has this been added?