DataTables Processing Info does not show up

Question

I included my server-side processing DataTables in jQuery UI TABS but after integration the processing info does not show up anymore :(

This stackoverflow.com post writes something about a hidden "Processing..."-Div.
Is it possible that my case matches a "z-index" problem?

This is the DataTables code :

$(document).ready(function() {

    $('#example').DataTable( {
        "processing": true,
        "serverSide": true,
        "ajax": {
            "url": "ajax_ssp_class.php",
            "type": "GET"
        },
        "order": [ [0,'asc'] ],
        "paging":true,
        "pagingType": "simple_numbers",
        "pageLength": 50,
        "lengthMenu": [[50, 100, 250, -1], [50, 100, 250, "All"]],
        "lengthChange": true
    } );
});

The proof whether the div is existent is tested as true:

<div id="example_processing" class="dataTables_processing" style="display: block; z-index: 10000;">Processing...</div>

THE SOLUTION
I added the following line to the pre-drawing. Now it works.

"fnPreDrawCallback":function(){
    //alert("Pre Draw");
    $('#example_processing').attr('style', 'font-size: 20px; font-weight: bold; padding-bottom: 60px; display: block; z-index: 10000 !important');
}

Gao

Try $('.dataTables_processing').css("visibility","visible"); – Headstone

ensure 'serverSide' is spelled in the exact same case. I had missed it and faced the same issue. – Ivett

Answer 1

I had a similar problem with the processing text not showing up when using server-side processing and then using search, re-order or changing the page size. The fix was to add the following CSS...

<style type="text/css">
    .dataTables_processing {
        top: 64px !important;
        z-index: 11000 !important;
    }
</style>

The key things here were the z-Index and top.

This also depends on having

"processing": true,

in your datatables initialisation

Domingadomingo

This is the solution – Cima

thank you so much, i have been searching for this solution hours – Cissoid

Answer 2

1. The ‘processing‘ option needs to be set to true and
2. In the ‘sDom‘ option the letter ‘r‘ was needed.

After making the amends, the final code looked something like so:

var options = {  
    "sDom": 'prtp',  
    "processing": true,  
    "serverSide": true,  
    "ajax": "/path/to/my/ajax.php"  
}  
var oTable = $('.datatables').dataTable(options); 

Jerald

I had to combine Repton's z-index solution with the "sDom" option. – Faradic

Answer 3

Check if you have an element $('.dataTables_processing').

If it's available then try setting z-index to very high value and show it:

$('.dataTables_processing').css({"display": "block", "z-index": 10000 })

Do that in browser console.

Plankton

The element exists, proofed by $('.dataTables_processing').length. But it is not shown...(tested with your z-index) – Gao

You need to find where is this element using browser dev tools. The element you are looking for maybe out of the screen or z-index is still not big enough. – Plankton

I am not that deep minded in debugging. Could you please give an example for firebug besides your mentioned proof of existing div? – Gao

I prefer Chrome dev tools developer.chrome.com/devtools#dom-and-styles. Run $('.dataTables_processing') in console, then right-click on the result and pick Reveal.... When you hover the mouse over the element in DOM, it should be highlighted on the page – Plankton