How to show loader while preparing the table

Question

Am preparing dynamic table(columns are depends on the data) using large data(ex: 50000 rows). To prepare these many records its taking 1 min time to render. To know table is rendering am showing a loader. But the problem is loader is not showing while preparing the table. Can you suggest me how to overcome this problem.

$('.loader').show(); 

preparingTable(data); // Preparing table by looping on data

$('.loader').hide();

Answer 1

$('.loader').show(); 
$.get( "getdata.html", function( data ) {
 $( ".result" ).html( data );
 $('.loader').hide();
});

If that was the idea, then you can use $.get in jQuery.
Make the preparingTable(data); in some other file.
Result will be show in the classresult.

getdata.html

preparingTable(data);

Answer 2

I suppose you use ajax for this.

1) Specify some place where you want to show your preloader. 2) When you request data, in your ajax function you can find that specified place and output your preloader there. 3) When you get ajax response, you just output your data to that place overwriting the preloader.

Answer 3

@michael give a good solution to this answer.

here is a way if you want doing some cheat...:P

..
..
<image or some loading animation object display here>

<!-- generating looooong table row -->

<script>
  //remove or hide your loading info object 
</script>
..
..