Earliest access to styled tables (prior to data fetch)

GregP

I am currently using fnInitComplete to execute a function described in another thread, whereby I move a normal H2 element into the toolbar using .append().

When the browser is slow (which Firefox seems to be lately!) I see this sequence:

1. Plain table without jQuery UI styles (this is fine; I could style with jQuery UI but I don't mind)
2. Headers and footers are constructed according to sDom, and added to the document
3. jQuery UI is applied
4. Data is fetched via Ajax
5. Data is added to the table
6. The header gets moved into the toolbar.

The pairings of 2/3 and 5/6 might be out of order, one follows the other so quickly within those pairs.

The ideal for me is that #6 from above ends up after #3 above. In other words, as soon as the header/footer are constructed with toolbars in place, and jQuery styling is present, I want to do the .append().

Is there a better callback or option to use instead of the one I'm using? I don't mind tracking a flag if it's one that would typically execute with each draw (after first draw, I'll just ignore the header move function).

Thanks!
Greg

PS, this isn't urgent or anything; what I do right now is have the H2 with visibility:hidden when it's outside .ui-toolbar, and the CSS takes care of it when it gets moved in. So rather than a 'jump' in the page, you just see the header appear after a few seconds.

allan

Hi Greg,

The reason for the delay is that fnInitComplete fires when the table has fully loaded, including the Ajax response. So what you really want is the very first draw - which DataTables does, and then makes the Ajax request. That can be achieved using fnDrawCallback and a check to see if oSettings._bInitComplete has been defined. If it isn't defined (i.e typeof == 'undefined') then it's the very frst draw and you can move the element - otherwise just skip on :-).

I should say that this is an undocumented internal "feature" and is likely to change in future versions... (although not 1.7.x if there any more releases of this series).

Allan

GregP

Sounds good in theory, but I must be doing something wrong.

[code]
if (typeof oSettings._bInitComplete == "undefined") {
// do stuff
}
[/code]

To evaluate in order to make the comparision, it tries to execute oSettings, sees that it's not defined (undefined) but the browser stops there with an error telling me that it's not defined. I've tried various permutations such as passing the object in parentheses like typeof(oSettings...) and reversing the order (start off with "undefined") but it's always the same. It tries to evaluate o.Settings and breaks.

I'm sure it's a stupid small syntax thing, but it's driving me berzerk.

I'm realizing as I'm typing that it's possibly due to the fact that I'm calling an external function -- titleSwap(obj) -- and I'm not asking about oSettings in the right scope.

EDIT: doesn't seem to be scope, either... if I move the conditional into the callback function itself (conditionally call the global function) it still breaks on oSettings._bInitComplete. So still perhaps a syntax thing.

allan

I've just tried this and it seems to work - mostly as expected:

[code]
$(document).ready(function() {
var oTable = $('#example').dataTable( {
"bProcessing": true,
"sAjaxSource": '../examples_support/json_source.txt',
"fnDrawCallback": function ( oSettings ) {
if (typeof oSettings._bInitComplete == "undefined") {
console.log('first draw');
} else {
console.log('subsequent draw');
}
},
"fnInitComplete": function ( oSettings ) {
console.log('init complete');
}
} );
} );
[/code]
The reason I say "mostly" is that it actually shows 'first draw' twice... The reason for this is that the draw function is called for the first pass before the Ajax, and then after the Ajax has loaded - but still before the init complete...

Your DOM move code might be fine with that, but equally you might want to have an external flag which you use to make sure it only happens once (i.e. set a 'done' flag to true after the first draw).

Allan

GregP

Yup, it works as you described. Rookie mistake: I had been passing a void function rather than passing oSettings.

Thanks!