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');
}
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.
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.
The maximum number of rows that a DataTable can store is 16,777,216.
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
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);
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With