Hourglass cursur during DataTable rendering, regular cursor afterwards

PaoloValladolid

I am trying to modify a search results screen. The search results are displayed in a DataTables table. Here is the desired sequence of events:

1. The cursor is an hourglass as soon as the search results page starts to be rendered
2. The cursor remains an hourglass while the DataTables table is being rendered
3. The cursor changes to the normal cursor after the rendering is complete.

Unfortunately, my code does not work. The load() call below does not seem to happen until after #3 above happens, which is wrong. And the code to change the cursor does not seem to be reached even though it is inside the ready() call below.

Any help would be appreciated. Here is the code:

[code]
$(window).load(function() {
document.body.style.cursor = 'wait'; // Cursor changes to hourglass
});

var searchResultTable;

$(document).ready(function() {
/* Add a click handler to the rows - this could be used as a callback */
$('#searchResultTable tr').click( function() {
if ( $(this).hasClass('row_selected') ) {
$(this).removeClass('row_selected');
document.getElementById('detail_0').value="";
document.getElementById('detail_1').value="";
document.getElementById('detail_2').value="";
var numRows = searchResultTable.fnGetData().length;
for (var i=0; i < numRows; i++) {
var node = searchResultTable.fnGetNodes(i);
if ($(node).hasClass('row_selected')) {
var aPos1 = searchResultTable.fnGetPosition(node);
if (aPos1 == null) {
return;
}
var aData1 = searchResultTable.fnGetData(aPos1);
document.getElementById('detail_0').value = aData1[19];
document.getElementById('detail_1').value = aData1[18];
var description = "";
if (aData1[20] != null) {
description = aData1[20].replace('&','&');
}
document.getElementById('detail_2').value = description;
}
}
}
else {
$(this).addClass('row_selected');
var aPos = searchResultTable.fnGetPosition(this);
if (aPos == null) {
return;
}
var aData = searchResultTable.fnGetData(aPos);
document.getElementById('detail_0').value = aData[19];
var packageDescription = aData[18].replace(/&/g,'&');
document.getElementById('detail_1').value = packageDescription;
var incidentDescription = aData[20].replace(/&/g,'&');
document.getElementById('detail_2').value = incidentDescription;
}
} );


searchResultTable =
$('#searchResultTable').dataTable( {
"bProcessing": true,
"sPaginationType": "full_numbers",
"aaSorting": [[1,'asc']], //added because it was sorting by checkbox column
"aoColumnDefs": [
{ "bVisible": false, "aTargets": [ 17, 18, 19, 20, 21 ] },
{ "sType": "us_date", "aTargets": [ 3, 7 ] }
]
} );

document.body.style.cursor = 'default'; // Cursor changes to normal
} );
[/code]

jonk

I ended up doing the following, an infinite recursive loop that checks for the presence of the processing div being set to visible. If anyone has a better suggestion, please share:

[code]self.setInterval(function(){
// Check for processing div visibility
if( $('#table_processing').css('visibility') == "visible" )
{
$('body').css('cursor','wait');
} else {
$('body').css('cursor','default');
}
},300);[/code]

Note: I put this outside the document ready.