get the "Processing..." progress bar to appear on first ajax load

chrisesimpson

When I click on a column header to sort the grid the "Processing..." bar appears. However, this doesn't seem to appear when I initially load the grid so, for a couple of seconds, it looks like there's no data. Is there a way to change this or am I doing something wrong?

Cheers

Chris

Selles

Hi Chris,

Maybe this helps:

http://datatables.net/forums/comments.php?DiscussionID=228&page=1#Item_3

I added a procesdiv all over the table and showed it before the datatable is called. Then when datatable is ready hide it:

Like this:

[code]
$(document).ready( function() {
// Show processingDiv
$('#processingDiv').show();
// Make table
oTable = $("#example").dataTable({
"fnClearTable": 0,
"iDefaultSortIndex": 0,
"fnInitComplete": function() { $('#processingDiv').hide();} // Hide processingDiv when loading table is complete
]});
});
[/code]

Hope this helps

Greetings Wim

chrisesimpson

Hi Wim,

That thread explains why it's not displaying. I also think I might borrow your idea if that's ok as it looks like a good one.

I'll let you know how it goes.

Thanks

Chris

chrisesimpson

Interestingly enough I've found that in firefox and chrome the normal processing bar appears as I would expect. It's only IE that hides it.

I think I'm going to leave it as is but thanks very much anyway.

Cheers

Chris

allan

Hi Chris,

I think the reason that this occurs is that IE isn't updating the rendering display until isn't current Javascript execution thread has ended (redraws are very expensive in processing time, so browsers try to avoid it as much as possible). It's also possible that this is tided in with the window.onload behaviour in IE.

I think Wim's approach is quite a good one to have a custom processing element embedded in your html and then hiding that when the start up is complete.

Having said that, I'll have a look in DataTables and see if it's possible to make the processing element appear during startup.

Allan

andrewmoreno

Allan,

What do you mean exactly by a custom processing element embedded in your HTML?

Where exactly should this div be placed for it to generate in the same location as the Data Tables Processing Div?