2

I have the below snippet of code that basically builds alot of rows in a data table. here is a demo. I am trying to use slepp to simulate a big dataset here. 

    //START:: show a loading message on the screen 
    //draw my rows 
    _.each(file, function(row) {
    //sleep(5000)
    t1.addRows(row)
    }); 
    //END:: STOP showing a loading message on the screen

and I want to be able to display to the user that it is loading.

How do I do this.

I have the below links but I cannot seem to get them to work

https://stackoverflow.com/a/3617657/2392358

https://stackoverflow.com/a/16485533/2392358

I want to use one of these images

I thinking of using one of these .gif files to display while loading.

Community
  • 1
  • 1
HattrickNZ
  • 4,373
  • 15
  • 54
  • 98

1 Answers1

1

SOLUTION

Add the following initialization option:

processing: true

Change your code for adding new rows to

$(".dataTables_processing").show();

setTimeout(function(){
    _.each(file, function(row) {
        t1.addRows(row)
    });  

    t1.oTable.draw();

    $(".dataTables_processing").hide();
}, 100);

DEMO

See this jsFiddle for code and demonstration.

Gyrocode.com
  • 57,606
  • 14
  • 150
  • 185
  • tks, one thing I would like to understand beter is what if the time it takes to build all the rows `t1.addRows(row)` is greater than the 100 you have the setTimeout set to. what would happen then? – HattrickNZ Oct 23 '15 at 02:24
  • @HattrickNZ, this just the trick to have the processing message displayed where `100` is 100ms. – Gyrocode.com Oct 23 '15 at 02:29
  • yeah i think i get that bit but if the rows are not built after 100ms then the code will execute and the 'processing' will hide but all the rows won't have been built yet. maybe my lack of understanding but want to - show processing - build rows - then draw - then hide processing. – HattrickNZ Oct 23 '15 at 02:54
  • @HattrickNZ, that's exactly what the code does - shows 'Processing', in 100ms starts adding rows then redraws the table with `draw()` then hides 'Processing' message. – Gyrocode.com Oct 23 '15 at 03:04