Datatables in IE7 and IE6 only allows one sort of a column after re-initialising

RyanP13

As is traditional, thank you for a great plugin. We are using it in our current project to great effect with .Net MVC2 and JSON :)

The issue we are having is that we use two instances of datatables on our project. One resides in the main screen of the web application and the other appears in a modal dialog.

When the web app is initially loaded datatables is intialised like so:
[code]
function reInitialiseQuoteTable() {
// Create new
$('#quotations').dataTable({
"fnInitComplete": function() {
// custom scroll bars
$('#icis_dashboard')
.find('.w_price_assess .dataTables_scrollBody')
.jScrollPane();
},
"bDestroy": true,
"bAutoWidth": false,
"bPaginate": false,
"sScrollY": "242px",
"bLengthChange": false,
"bInfo": false,
"bFilter": false,
"aaSorting": [[2, 'asc']],
"aoColumns": [
{ "sSortDataType": "dom-checkbox", "sWidth": "3%" },
{ "bSortable": true, "sWidth": "8%" },
{ "bSortable": true, "sWidth": "10%" },
{ "bSortable": true, "sWidth": "15%" },
{ "bSortable": true, "sWidth": "8%" },
{ "bSortable": true, "sWidth": "9%" },
{ "bSortable": true, "sWidth": "6%" },
{ "bSortable": false, "sWidth": "2%" },
{ "bSortable": false, "sWidth": "7%" },
{ "bSortable": false, "sWidth": "13%" },
{ "bSortable": false, "sWidth": "2%" },
{ "bSortable": false, "sWidth": "7%" },
{ "bSortable": false, "sWidth": "10%" }
]
});
}[/code]

This is fine all the sorting works as specified etc.

We then open a modal dialog which in turn will effect the data on the previous initialised table so we destroy it.

We then initialise the table in the modal dialog like so:

[code]
function initialiseQuoteFavouritesSelectionTable() {
$("#quote_prefs").dataTable({
"aaSorting": [[1, 'asc']], //disable default sorting order
"bLengthChange": false, //remove drop-down for length change
"bPaginate": true, //pagination
"sPaginationType": "full_numbers",
"bProcessing": false, //disables processing indicator
"iDisplayLength": 15, //set display length
"bSortClasses": true, //turn off sorting classes
"bAutoWidth": false, //smart column width calculation
"bFilter": true, //turn off filtering
"sDom": 'l<"wrap"t>ip', //re-order datatable elements: length, wrap div > table, information, pagination
"aoColumnDefs": [
{ "sName": "Selected", "aTargets": [0], "sWidth": "4%", "bSortable": false },
{ "sName": "Commodity", "aTargets": [1], "sWidth": "18%" },
{ "sName": "GradeDisplay", "aTargets": [2], "sWidth": "20%", "bSortable": false },
{ "sName": "TermName", "aTargets": [3], "sWidth": "10%" },
{ "sName": "LocationName", "aTargets": [4], "sWidth": "12%" },
{ "sName": "UnitDisplay", "aTargets": [5], "sWidth": "8%" },
{ "sName": "Properties", "aTargets": [6], "sWidth": "10%", "bSortable": false },
{ "sName": "StartDate", "aTargets": [7], "sWidth": "7.5%" },
{ "sName": "LatestDate", "aTargets": [8], "sWidth": "7.5%" },
{ "sName": "Notes", "aTargets": [9], "sWidth": "3%", "bSortable": false }
],
"sAjaxSource": DashboardApplicationRoot + "Quote/FavouriteQuoteSelection",
"bServerSide": true,
"fnServerData": function(sSource, aoData, fnCallback) {
addDataForServerSideProcessing(aoData);
getPaginatedQuotes(sSource, aoData, fnCallback);
}
});
}
[/code]

This table also works fine :)

Once the dialog is closed there is another call to reInitialiseQuoteTable() function which re-initialises the datatable on the main screen.

In Firefox i can then sort on any of the columns but in IE7 and IE6, after said dialog has been closed, i can only sort on any columns of the newly intialised table once. Any further click on the same column will not sort, change the sorting classes. To debug i logged a console message and it appears the table is redrawing.

Any help would be greatfully received.

RyanP13

Hi,

To add to this it now appears as though there are multiple redraws of the table on the main screen after the dialog has been closed.

And they appear to accumulate after it has been closed. So if i open the dialog twice (open, close, open, close) and then try to sort on the columns the logging to the console will display two redraws when i would expect one.

This is happening in all browsers but Firefox still performs the sorting whereas IE does not.

RyanP13

Some more testing has shown that i need to destroy the datatable in the dialog prior to re-initialising the datatable on the main screen.

I am using Colorbox for the dialog method which provides a callback once the dialog is closed.

If i place the following code in that callback the defect seems fixed in IE but a JavaScript error is thrown:

In firefox it returns 'a is null' and in Ie (CompanionJs) it returns 'nTableWrapper is null or not an object'.

So close but no cigar!

allan

That sounds very odd indeed! With your original code, if you get to the point where yo are seeing the problem, what do you see if you run Visual Event? http://sprymedia.co.uk/article/Visual+Event . The click event should still be attached... It might also be interesting to 'profile' the Javascript to see what is actually running - if anything.

Allan