Put Processing message at the top of table in datatables with existing data?

To put the processing message at the top of the datatables and not in the middle you could do it this way using div.dataTables_wrapper div.dataTables_processing and top:0 (or top:-10 if you want to see the headers while the table is loading) :

div.dataTables_wrapper div.dataTables_processing {
  top: 0;
}

JSFiddle : https://jsfiddle.net/0usjep4r/

(The DataTables ajax request is the courtsy of gyrocode and it was created by him. I simply modified it to get the desired result.)


The problem with only adding top: 0 is that you obscure your 'Show [num] entries' widget:

enter image description here

In a production application, it's typically considered bad UX to obscure widgets that might later be used by customers. If you agree, you'll want to add a few more things:

#get-storage-space-dt-listing-table_processing {
  top: -10px;
  width: auto;
  margin: 0;
  transform: translateX(-50%);
}

This allows for the 'Show [num] entries' to once again be visible:

enter image description here