show a loading image while a table is being built in a part of the html

Question

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.

Answer 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.