Loading new table in IE

peterkronenberg

I've got a script that is working fairly well in Firefox, but now I'm trying to get it to work in IE.

When loading a new table, I use the bDestroy option. Works fine in Firefox, but IE is telling me (Added data does not match known number of columns). It seems that the destroy is not taking effect.

allan

I'm going to guess you are using a json data array, and the cause is likely this: http://datatables.net/faqs#comma . If it's not, can you link us to an example please.

Allan

peterkronenberg

Couldn't find any stray commas. But while cleaning up the code to be able to post it here, I started getting the same problem on Firefox. Don't know what's going on.
It's complaining about line 2510 (in the un-minified code) that oSettings.aoColumns[i] is undefined.

Code is here: http://dl.dropbox.com/u/4104018/displayTable.html

allan

I'm struggling a bit to follow the code through when it's not actually functioning (i.e. the resources the browser tries to load are all 404) - I'd suggest a console.dir( ajaxData ) just before you call the DataTable and see what properties the object has. Does it have a valid data array attached to it?

Allan

peterkronenberg

The code you have shouldn't be using Ajax, due to the flag on line 103. It should be using dummy data. Here are the Datatables options that are being passed:


Tuesday, October 05, 2010 8:18:32 AM (GMT-400): Calling dataTable with options: {"aaData":[["1","one","col3","col4"],["2","two","col3","col4"],["3","three","col3","col4"]],"aaSorting":[],"bDestroy":true,"bProcessing":true,"aLengthMenu":[[10,25,50,-1],[10,25,50,"All"]],"sPaginationType":"full_numbers","sDom":"CT<\"clear\">lfrtip"}

peterkronenberg

I have managed to upload my code so you can run it here: http://www.nova.org/~pak/test/displayTable.html.

allan

So is the problem that you get an error when changing between tables? I believe I know what is happening - because you've not scoped the 'options' variable, it's global, as such you are actually hitting a bug in 1.7.2. If you upgrade to the latest version the issue should "go away". However, it would still be worth adding a 'var' to the options variable :-)

Allan

peterkronenberg

Allan,
I'm afraid that didn't fix it. Turns out I had already downloaded 1.7.3, but had only replaced the min file. Now, I have everything running 1.7.3 and I added the 'var' but I'm still having the same problem.

allan

Could you console.log the alert that you've got commented out with the options stringified? Also console.log( $('#mainTable').html() ) as well please?

Allan

peterkronenberg

done

allan

Great thanks for that - I understand what is happening now :-)

Basically what is going on, is the sequence of events is:

1. Create table with 3 columns
2. Initialise DataTables - fine as there is no previous table to destroy
3. Create table with 4 columns
4. Initialise DataTables - the destroy will reconstruct the table with three columns, and then proceed with the initialisation...!

So what you need to do, is call fnDestroy before you write the HTML into the table. For example, this works:

[code]
$(document).ready(function() {
$('#example').html(
'keyvalue3rdkeyvalue3rd');

$('#example').dataTable({
"aaData":[
["1","one","col3"],
["2","two","col3"],
["3","three","col3"]
]
});

$('#example').fnDestroy();
$('#example').html('keyvalue3rd4thkeyvalue3rd4th');

$('#example').dataTable({
"aaData":[
["1","one","col3","col4"],
["2","two","col3","col4"],
["3","three","col3","col4"]
]
});
} );
[/code]
Allan

peterkronenberg

ah, so the bDestroy option actually tries to re-build the table. I assumed the re-build didn't happen until I call Datatables again.
I will give this a try. Thanks for your help

peterkronenberg

I'm afraid it didn't work.
First, I assume you mean that fnDestory() needs to be called on the dataTable object, not on the node returned from jQuery. So, in your example above, it would be

myTable = $('#example').dataTable....
myTable.fnDestory();
// create a new table
myTable = $('#example').dataTable...

But even so, I'm getting the same results. The code at http://www.nova.org/~pak/test/displayTable.html has been updated.

But I'm still not sure I understand the difference between fnDestroy and the bDestroy option. Can you explain?

allan

I think the problem is the sequence in which you are calling things. Move the fnDestroy call to the top of your reset function (or at least before you remove the table's child nodes) and it should spring into action.

bDestroy, when set to true, will call fnDestroy itself, so there is little difference. However, it's complicated since you are removing and then creating table elements "manually". fnDestroy will put the table back into it's original state - which means putting the elements back into the table. Although you've removed them from the table, there is still a reference to them in DataTables, and fnDestroy undoes the removal you've done! If you would to stop the processing there, you should see this. It's a subtle but important difference.

Regards,
Allan

peterkronenberg

That did it!

Some of the code is there from before I was using DataTables. I suppose I don't need to manually remove the elements of the table if DataTables will do all that for me.