bProcessing usage

bProcessing usage

edited October 2010 in General Posts: 5
I have a large table that takes a bit to process in dataTables, so I was getting the 'flash' before the script would make it's rendering changes. I've set bProcessing to true, but nothing seems to happen as a result. Am I missing something in its usage?

Here's my initialization code:

$(document).ready(function() {
oTable = $('.datatable').dataTable({
"sPaginationType": "full_numbers",
"bSort": true,
"bInfo": false,
"bAutoWidth": false,
"bPaginate":false ,
} );


  • Posts: 22,729
    The usage looks correct. Who long is a 'while'? Also have you got styling on the processing element to make it nice and visible? My demo CSS have it not particularly intrusive. Failing that can you give us a link?

  • Unfortunately the page is on an Intranet. With a table of around 2000 rows, it takes about two to three seconds before the end styles are applied (this also happens when I have multiple smaller tables that I'm loading into separate tabs). I haven't applied any additional styling - I'm using the css from the demo. I'm just not seeing anything at all in terms of an indicator. I've looked through your examples - is there one that I'm missing that demonstrates this in action with a large table (so I can see what I'm messing up on my end?)

    Thanks for your help
  • Posts: 22,729
    I think you've picked up a bug here - thanks for flagging it up! DataTables wasn't actually setting the processing indicator to visible during initialisation for non-Ajax source (client or server-side processing) data sources. I've just committed a small change for this to be correct, which you can grab from the 'nightly' download file on the downloads page: http://datatables.net/download/ .

    One thing to note that I have seen before, it is possible that some browsers might not display this processing indicator until the rendering is complete - their attempt to stop the flash of unstyled content. Depending on your usage, this might or might not be an issue. I think the best approach is to try it and see!

  • On that note Allan, the nightly for Oct 17 has a small bug - the processing element displays correctly but appears 'behind' the table when off. It should be completely hidden, and not just have it's z order rearranged.

  • Posts: 22,729
    Hi shamufish,

    What should happen is that the processing element is "visibility: hidden" when not displayed. This appears to be working okay for me when used with my zero config example and bProcessing enabled. Is it not for you?

  • <div class="dataTables_processing">Processing...</div>

    tasksTable = $(document).ready(function() { $('#tasks').dataTable({ "bPaginate": false, "bLengthChange": false, "bProcessing": true, "bStateSave": true, "aaSorting": [[2,'asc'], [3,'desc']], "sDom": 'lfritp', "aoColumnDefs": [ { "bSearchable": false, "aTargets": [ 0, 1, 2, 3, 4, 7, 8, 9, 10, 11, 12, 13] }, { "bSortable": false, "aTargets": [ -1, -2, -3 ] } ] }); } );
    the word 'processing' is visible behind the table and clearly visible when the table length is 0
  • Posts: 22,729
    Interesting - is there any chance you can post a link to an example which is showing this please? I've just tried your initialisation code on my zero config example (with just the aTargets arrays altered) and it seems to be working as expected.

    There isn't a Javascript error cropping up anywhere is there?

  • edited October 2010 Posts: 14
    There is, on load, but it doesn't seem to affect the behaviour of the table:

    Uncaught TypeError: Object #<an Object> has no method 'dispatchEvent'

    I thought it was safe to ignore. (because it's prototype throwing)
  • Posts: 22,729
    It might be - but then it could be killing that Javascript "thread", if DataTables is done in that execution sequence. Can you give us a link?

  • I downloaded the latest nightly and I'm afraid I'm still not seeing anything. I've segregated the table out of my web app completely, and I'm trying it solely with nothing but jquery, jqueryui, and your js/css. I've tried it in FF3.5, Chrome and IE and I'm still getting the 'flash'.
  • Allan on my end I cannot post an example because the data in question is confidential to my company. I'm going to continue working on this and will report in this thread if I make progress. Cheers!
  • shamufish: you can always use something like jsbin.com, take your generated source and comb your confidential info out and put lorem ipsum or something similar in.
  • So I tried this again on an older machine using IE (guaranteeing slow performance), and while I didn't see anything on the initial loading of the table, when doing a column sort a little 'Processing' popup was there. Is that what's supposed to be showing up before the initial table load?
  • Hi everyone,

    I've now got rid of the prototype error (by removing prototype). That didn't work still so I just load the zero config demo.

    The issue with the persistent 'processing' message is still there. Both on the latest chrome and IE9 on win7, with no extension loaded and a clear jscript console post load on both.

    I think the problem is not with the datatables code though, but with how you shoud set this up. Please correct me if i'm wrong, you're supposed to:

    1) create a div container and put it anywhere on the page:
    <div class="dataTables_processing">Processing...</div>
    2) do this:
    $(document).ready(function() { $('#example').dataTable({"bProcessing": true}); } );
    Correct? Or am I missing something?
  • Posts: 22,729
    Not quite - don't do step 1. DataTables will create that element for you automatically. Just do step 2.

  • OK - so I have omitted step one.
    Now the 'Processing' text box no longer persist when it shouldn't - which is good news.
    And I know where the bug is the 174dev version! That's chrome latest (not beta), no extensions, no js errors, win7.

    In a nutshell you can see it appear and disappear correctly as needed IF THE TABLE IS SMALL

    But if the scrolling is disabled it will still try to center the message in the vertical middle of a large table... and of course the processing message is not visible to the user because vertically centered off screen.

    I hope this helps.
  • I ended up putting the table in a hidden container div and toggling the visibility after datatables finished its processing. It's not ideal, but it's much less jarring visually.
This discussion has been closed.