Is it possible to show spinner/loading-msg for HTML sourced data in jQuery-DataTables?

Question

Our server is rendering a <table> element with about 1000 lines of data in HTML. Client JS then initializes the DataTable from this HTML data . However, on client it takes about ~3-5 second before DataTable is fully initialized and pagination is shown. During this time, full 1000 rows are rendered and visible in DOM. I didn't find it in DataTable documentation, but is there a way to show a "processing" message, or spinner while datatable in processing the dom HTML?

Such option is available of ajax or server-side-processing source, but didnt find it for HTML data source.

Answer 1

You have add below option in your datatable config.

"processing": true &   oLanguage: {sProcessing: "<div id='loader'></div>"}

Suppose if we consider your table id is "example".

JS code:

$('#example').DataTable( {

         "processing": true,
        responsive: true,
        oLanguage: {sProcessing: "<div id='loader'></div>"}
});

CSS for loader :

 #loader {
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
  margin-left:200px;
  margin-top:30px;
}   

Note : You have adjust css as per your datatable

For Working example you visit below link:

http://jsfiddle.net/dipakthoke07/ebRXw/3302/