hidden row/details, ajax, and processing animation

subliminal

I have a datatable that loads extra data from the server on a button click using fnOpen. On certain rows the loading time takes longer and I'd like an animation to show while it is loading. Unfortunately the only way I can load the data is to turn async to false (right?) and this freezes everything until the data is loaded. I saw some information on using fnProcessingIndicator to achieve this, but I can't seem to implement it successfully.

My table is fairly similar to the server processing example on the site, but it makes an additional ajax call to load the hidden row data instead of using aData. Also I have server processing turned off so I can still use datatable's sorting and paging.

Any help would be greatly appreciated. Thanks for a great plugin!

fbas

[code]
$(document).ready(function() {
$('#example').dataTable( {
"oLanguage": {
"sProcessing": ""
}
} );
} );
[/code]

subliminal

Thanks for the response fbas. I already have that feature enabled. It works fine when loading the table, but I'd like the animation to appear after the user clicks the plus image to expand the row (while loading data from the server).

subliminal

Now I'm thinking it's something specific to IE. This code performs as expected in firefox but not IE:

[code] function fnFormatDetails(oTable, nTr) {
var aData = oTable.fnGetData(nTr);
var sOut;

$.ajaxSetup({ async: false, "error": function () {
alert("error");
}
});

$('#loading').empty().html('');

$.getJSON('GetDetails' + '/' + aData[1],
function (data) {
sOut = data.details;
});

$('#loading').hide();

return sOut;
}[/code]

subliminal

Found the solution here: http://www.datatables.net/forums/discussion/3345/datatables-hidden-row-to-query-a-different-table-for-data-based-on-first-table-row-value/p1

I change the fnFormatDetails function to just return the parameter needed to get the JSON (aData[1])

[code] /* Return the ID for the current row's record */
function fnFormatDetails(oTable, nTr) {
var aData = oTable.fnGetData(nTr);
return aData[1];
}[/code]

Then I change the click event handler to display the .gif in the new table cell until the ajax request completes and replaces it with html from the server.

[code]
//Handle the expansion of a row and display details
$('#table tbody td img.detailsPic').live('click', function () {
var nTr = this.parentNode.parentNode;

if (this.src.match('details_close')) {
/* This row is already open - close it */
this.src = "/details_open.png";
oTable.fnClose(nTr);
}
else {
/* Open this row */
this.src = "/details_close.png";
var jID = fnFormatDetails(oTable, nTr);
var newRow = oTable.fnOpen( nTr, , 'details' );
$.getJSON('URL/' + jID,
function (data) {
$('td', newRow).html(data.details);
});
}
});[/code]