aoHeader length incorrect, causes table to crash

Arka3L

Allan,

I was so ready to call my project complete when i happened to stumble across this issue and I'm really hoping you can help because we need to start mass producing tables for a job I'm working on.

In a nut shell, I'm dynamically creating the table columns and row info from a user selection. These inputs are getting passed correctly to the table every time as I've been console logging everything to test. However, it seems that almost constantly if i change my selections on the third/fourth round after clearing and destroying the table, i get an error at line 3655, nThs[i-iCorrector].style.width = ""; because the index of the loop is being calculated incorrectly.

To help you understand better, here's an example broken down.

console.log("sending columns to table: " + chosenTableColumns.length) outputs: 3
console.log("oSettings.aoHeader: " + oSettings.aoHeader[0].length) outputs: 3

I click a back button to go back to the selection screen which in turn does the following
oTable.fnClearTable(); // Clear table Data
oTable.fnDestroy(); // Destroy the table object

and i clear all of my original arrays before passing them to a new table.


I make difference choices and it generates the table fine. By the say, 3rd or 4th round, the outputs look like this:

console.log("sending columns to table: " + chosenTableColumns.length) outputs: 4
console.log("oSettings.aoHeader: " + oSettings.aoHeader[0].length) outputs: 3

even oSettings.aoColumns.length = 4.

It seems aoHeader is not matching aoColumns everytime which causes the loop to break at line 3655 because of an incomplete iteration;

I'll go ahead and host my page for you to test:
www.rfgraham.net/datatables/

Please! help!

allan

So the problem here is that when you call fnDestroy, DataTables will put the table node back into the document, with the plain HTML markup - so its still got (for example) four columns. Then if you were to unselect a category, so it would only have 3 columns, the HTML table you use still has 4, and thus DataTables gets very confused.

Easiest way to fix it: just after you do `oTable.fnDestroy();` - just add `oTable.children().remove();` and that should do it.

Allan

Arka3L

Hallelujah! Thanks Allan!!