Display spinner while DataTables table loads Ruby on Rails

Question

Using Rails I have built a web app. One of the pages of the web app displays a table which uses the DataTables API. This JSFiddle shows an example of what my web app looks l

Answer 1

You can add in a spinner gif (find one here: http://www.ajaxload.info/) as a div where your table should be and then clear it when the table loads using initComplete.

Put something like this right below <div class="col-md-12">:

<img id="loadingSpinner" src="/myspinner.gif">

And then call your table like this:

$(document).ready(function() {
  var table = $('#app-list-table').DataTable({
    //any other datatables settings here
    "initComplete": function(settings, json) {
      $('#loadingSpinner').hide();
      //or $('#loadingSpinner').empty();
    }
  })
});

Answer 2

Ive used the code provided on the link below, but insteat of using an old jquery version you should use the latest one (3.x), otherwise Datatables will crash. Hope this help

http://bradsknutson.com/blog/display-loading-image-while-page-loads/

Answer 3

If you are looking for a way to hide the datatable until it's ready, it is possible to do this by putting the datatable inside a div that is initially set to display:none and then showing the div after you've initialised the datatable... I also included an opaque overlay div over the whole page while the datatable(s) are loading and a delay of 500 ms to force the loading effect.

<script type="text/javascript" language="javascript" >
$(document).ready(function () {

	$(function(){
	   function loadDataTable(){
		
			var dataTableId = $('#dataTableId').dataTable({"initComplete": function(settings, json) {$('.overlay').hide();});
			$('#divContatingDataTable').show();
	};
	   window.setTimeout(loadDataTable, 500);
	});

});
</script>

<style type="text/css">
	.overlay {
		background: #ffffff;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		width:100%;
		height:100%;
		text-align: center;
		opacity: 0.8;
	}
</style>

<div class="overlay">
	This div / overlay contains a loading message / image and can be styled however you like
	<img class="loading" src="loading.gif" />
</div>


<div id="divContatingDataTable" style="display:none;">
	<!-- Datatable contents with id dataTableId go here -->
</div>

Answer 4

If the data is loaded in Ruby, there's no point in loading a spinner because the data has already loaded by then. This is a bare-bones ordering of what happens in your Rails app:

1. Controller then view Ruby executes, rendering HTML
2. HTML is sent to client
3. Client requests linked CSS and JS in order
4. CSS and JS execute in order
5. Asynchronous JS finishes

So, the majority of your delay is happening at step 1, but a CSS/JS spinner won't load until step 4. If you want to use a spinner, you need to load the data via async Ajax, so you can load the spinner in 4, then finish loading data and remove spinner in 5. Using jQuery Ajax:

var spinner = new Spinner().spin(document.getElementById('spinner'));
$.ajax("/your/data/path.json")
.done(function(data) {
  // load data here, then load table:
  var table = $('#app-list-table').DataTable({ … })
  // remove spinner
  $('#spinner').remove();
});

You could of course add the spinner to your current code:

var spinner = new Spinner().spin(document.getElementById('spinner'));
$('#app-list-table').DataTable({ 
  …
  initComplete: function() { $('#spinner').remove(); }
})

However, again, since most of the delay happens in Ruby, you'll only see the spinner for a brief moment at the end of the delay. To see the spinner for the whole delay, use Ajax.