DataTables loading message not showing when using server side processing

Question

I've read Loading Message using Datatables

DataTables 1.10.16 using ajax source data and server side mode.

My table has the following initialisation code:

var substancesTable = $('#substancesTable').DataTable({
    "processing": true,
    "serverSide": true,
    "searching": false,

   "ajax": function(data, callback){
       // code for ajax request
   },
   "language": {
        "lengthMenu": "_MENU_ per page",
        "zeroRecords": "Sorry no records found",
        "info": "Showing <b>_START_ to _END_</b> (of _TOTAL_)",
        "infoFiltered": "",
        "infoEmpty": "No records found",
        "processing": '<i class="fa fa-spinner fa-spin fa-2x fa-fw"></i>'
    },
});

DataTables correctly uses the "processing" property - it shows a FontAwesome spinner (.fa-spinner) when the data is ready to be rendered by DataTables; which happens when the ajax request is complete.

However, I want to show a message - such as "Loading data..." - whilst the ajax request is in process.

So the advice on the previous SO link says about using the loadingRecords property within language. So I added this:

"language:" {
    // ...
    "loadingRecords": "Loading data..."
}

This does nothing.

Furthermore, I would prefer to use something similar to my overlay which I set using the processing property. I believe that using loadingRecords only adds a row to the table whilst the ajax process is being completed, which isn't ideal anyway.

I can't see anything in DataTables documentation about this.

What options do I have here? How do I inform the user that the ajax request is in process? This happens quite a lot as some searches take >4 seconds in my application due to the nature of the data being searched.

There is conflicting (and wrong) information on the DataTables website: https://datatables.net/forums/discussion/41654/how-to-display-a-progress-indicator-for-serverside-processing says that processing property can be used for this question. But https://datatables.net/reference/option/language.processing (correctly) says that this is for "when the table is processing a user action". In my experience processing only fires when DataTables is doing some client-side work (i.e. updating the table), nothing to do with waiting for server side data.

Answer 1

Just add these lines inside datatable function

language: {
  processing: '<i class="fa fa-spinner fa-spin fa-2x fa-fw"></i>'
},

Answer 2

According to the language.loadingRecords reference: (formatted for clarity)

Note that this parameter is not used when loading data by server-side processing, just Ajax sourced data with client-side processing.

So in your case — using server-side processing, the loading message/indicator will never appear.

However, it's actually a simple table row (tr) element which DataTables adds to the table body (tbody), so you can manually add the tr from your ajax option/function.

Here's an example where I used jQuery.ajax() to make the AJAX request, and the beforeSend option to display the loading message:

Demo on CodePen

$(document).ready(function() {
  $('#example').DataTable( {
    serverSide: true,
    processing: true,
    language: {
      processing: '<i class="fa fa-spinner fa-spin fa-2x fa-fw"></i>'
    },
    ajax: function(data, callback){
      $.ajax({
        url: 'http://example.com/path/to/some-file',
        'data': data,
        dataType: 'json',
        beforeSend: function(){
          // Here, manually add the loading message.
          $('#example > tbody').html(
            '<tr class="odd">' +
              '<td valign="top" colspan="6" class="dataTables_empty">Loading&hellip;</td>' +
            '</tr>'
          );
        },
        success: function(res){
          callback(res);
        }
      });
    }
  } );
} );

And if your ajax option is an object (which DataTables simply passes to jQuery.ajax()), then:

$(document).ready(function() {
  $('#example').DataTable( {
    serverSide: true,
    processing: true,
    language: {
      processing: '<i class="fa fa-spinner fa-spin fa-2x fa-fw"></i>'
    },
    ajax: {
      url: 'http://example.com/path/to/some-file',
      beforeSend: function(){
        // Here, manually add the loading message.
        $('#example > tbody').html(
          '<tr class="odd">' +
            '<td valign="top" colspan="6" class="dataTables_empty">Loading&hellip;</td>' +
          '</tr>'
        );
      }
    }
  } );
} );

Note: Change the example to your table ID and the colspan value to the appropriate one based on your table..

Answer 3

You should set your dom option of DataTables. It has a default value of lfrtip. The r stands for processing display element. Combine it with the language.processing option with your desired value.

Also, I've noticed you're using ajax source data with server side mode on. As detailed on the documentation, the language.loadingRecords must only be used if you're initializing by ajax sourced data with client-side processing.

$('#example').dataTable({
    "dom": 'lrtip',
    "language": {
        "processing": 'Loading data...'
     }
});