Loading new table in IE
Loading new table in IE
peterkronenberg
Posts: 112Questions: 0Answers: 0
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.
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.
This discussion has been closed.
Replies
Allan
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
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"}
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
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
I will give this a try. Thanks for your help
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?
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
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.