DataTables - div handling won't show if there are too many records

I am using DataTables 1.10.15 in Server Side mode in a web application.

The application contains about 240,000 records in the database. I changed the parameters of the results per page as follows (25, 100, 250, 500, 1000, 2500, 5000 per page) with a default of 250 records:

$('#myTable').DataTable( {
    // Ajax call etc ...

    "processing": true,
    "serverSide": true,
    "lengthMenu": [ 25, 100, 250, 500, 1000, 2500, 5000 ],
    "pageLength": 250, 
});

      

        
        
        
      

    

Due to the time it took to complete the ajax request, I want to show the message "processing" "processing": true

. All this makes displaying the visibility of this <div>

:

<div id="myTable_processing" class="dataTables_processing panel panel-default" style="display: none;">Processing...</div>

      

        
        
        
      

    

However, there is a problem with how it works. In the DataTables CSS file, we have the following:

div.dataTables_processing {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200px;
    margin-left: -100px;
    margin-top: -26px;
    text-align: center;
    padding: 1em 0;
}

      

        
        
        
      

    

This will never work with large result sets (e.g. 500, 1000, 2500, 5000 records) because it showed 50% of the top of the screen. If you have tables of thousands of records, this is the way down the page and the user will never see it until they scroll down to the appropriate section - which will also differ depending on the number of records shown, and they won't have time to do this.

To make sure that this is the case, I added some options to mine lengthMenu

, for example 1, 2, 3, 4, 5

, and it actually works if there is no vertical scrollbar in the browser - presumably because 50% of the top is still visible?

Is there a better way to accomplish this?

I've tried position: fixed;

in CSS but that doesn't make it any better.