Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

DataTables Processing Info does not show up

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');
}
like image 583
njlqay Avatar asked Jun 28 '16 14:06

njlqay


People also ask

Why is my DataTable not working?

The cells must all either be “locked” or “unlocked”. Attempting to run the Data Table tool when all the cells in the table are not consistent will result in an error. To check or change the “locked” settings of a cell, select the cell, go to the Format Cells menu (CTRL + 1), and choose the Protection tab.

What is processing in DataTable?

Description. This event is fired when DataTables is doing some kind of processing - be it, sorting, filtering or any other kind of data processing. It can be used to indicate to the end user that there is something happening, or that something has finished.

How much data can DataTables handle?

The maximum number of rows that a DataTable can store is 16,777,216.


2 Answers

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

like image 181
Repton Bloke Avatar answered Oct 04 '22 13:10

Repton Bloke


  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); 
like image 36
Dixit Solanki Avatar answered Oct 04 '22 13:10

Dixit Solanki