Function that fires before AJAX call?

ColonelForbinX

First of all I'd like to say that DataTables is everything and more than I could've hoped for. Thank you for all your hard work!

I'm currently at work replacing YUI data tables in a RubyOnRails application. The server-side processing is very intensive, and can often take 3-8 seconds to return the JSON objects and populate the data table (due mostly to column sorting on very large data sets). During these processing times, I'd like to throw a CSS overlay with 100% width and height over the page with a status bar in the middle. This is so: A) Users know that the application is actually doing something during this time; and B) Users can't get "click-happy" and generate many concurrent (and server crippling) SQL queries, because the DIV overlay will prevent them from triggering additional click events until the table is done loading.

The initial page load is easy since I can use fnDrawCallback to hide the overlay (which is visible by default). But on additional server-side requests, is there a function I can specify in my initialization that will allow me to perform a quick jQuery snippet (i.e. show the overlay) before the AJAX request is made to the server?

Note- I've tried using the #dashboard_processing DIV for this, but given that the DIV is a child of the data table and the nature of my template, I cannot position it so it covers the whole screen. I also thought of adding a custom click event to all the buttons, but I use multiple data tables with completely different initializations and I was hoping there was some easy catchall I could use in this case.

Here's the implementation in question:
[code]
$('#dashboard').dataTable({
"bJQueryUI": true,
"bAutoWidth": false,
"bStateSave": true,
"bProcessing": true,
"bServerSide": true,
"bSortClasses": false,
"sPaginationType": "full_numbers",
"sAjaxSource": "/accounts/<%= @account.id %>/dashboard",
"aaSorting": [[ 2, "desc" ]],
"fnDrawCallback": function(data) { $('.dataTables_overlay').hide(); },
});
[/code]

ColonelForbinX

I think I've found the solution I was looking for. I added the overlay show to the "fnServerData" definition like so:

[code]
...
"fnServerData": function ( sSource, aoData, fnCallback ) {
$('.dataTables_overlay').show();
$.getJSON( '/accounts/<%= @account.id %>/error_counts', aoData, function (json) {
fnCallback(json);
});
},
"fnDrawCallback": function(data) { $('.dataTables_overlay').hide(); }
[/code]

... and now my datatables display a nice, friendly status bar whilst the JSON retrieval is taking place. In case anyone is interested, here's the CSS for the overlay:

[code]
.dataTables_overlay {
background: #000 url('/images/ajax-loader.gif') no-repeat center;
z-index: 9999;
width: 100%;
height: 100%;
min-height: 100%;
position: fixed;
left: 0px;
top: 0px;
text-align: center;
color: #000;
display: none;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
filter: alpha(opacity=70);
opacity: .7;
}
[/code]