Processing message

Giulo

Hi,
all my web application pages have php source than load an array then in javascript I set a variable with json echo and I use that for load my datatable.
If I've a lot of rows I would like to display a loading message of an animated gif (second not work properly in Firefox)
I've try:

$('#example').dataTable( {
    "processing": true
} );

I've try to change Z-index in css but nothing!

I would have expected to see the message when I change the number of rows that can be displayed or when I first load the datatable.

Where am I doing wrong?

This is my datatable declaration code:

var dataSet = <?php echo $json_array ?>;
var myDiv = document.getElementById('areaDati');
var numRows = Math.floor((myDiv.clientHeight - 200) / 31);
var scrollY = myDiv.clientHeight - 200;
if (numRows < 4){numRows = 4;}
$(document).ready(function() {
    $('#chiamate').DataTable( {
        data: dataSet,
        responsive: true,
        "scrollY": scrollY + "px",
        "scrollCollapse": true,
"processing": true,     
        columns: [
            { title: " " },     
            { title: "Idchiamata" },
            { title: "Modifica", data: {_: "2.0", sort: "2.1" }},           
            { title: "Numero" },        
            { title: "Data", data: {_: "4.0", sort: "4.1" }},
            { title: "Azienda" },
            { title: "Scadenza", data: {_: "6.0", sort: "6.1" }},
            { title: "Stato" },         
            { title: "Operatore" }          
        ],
        columnDefs: [{ targets: 0, searchable: false, orderable: false, className: "zoomColumn text-center", render: function (data, type, row){return "<span name='zoom' class='glyphicon glyphicon-eye-open' onClick='zoomRow(" + row[1] + ")'></span>"}},        
                     { targets: 1, visible: false, searchable: false},
                     { targets: 2, className: "text-center"},
                     { targets: 3, className: "text-center"},   
                     { targets: 4, className: "text-center"},       
                     { targets: 6, className: "text-center"}],                   
        initComplete: function () {
            var prog = 0;       
            this.api().columns([2,3,4,5,6,7,8]).every(function () {
                var column = this;
                if (column[0] == 2) {var val = 'Modifica';}
                if (column[0] == 3) {var val = 'Numero';}
                if (column[0] == 4) {var val = 'Data';} 
                if (column[0] == 5) {var val = 'Azienda';}                  
                if (column[0] == 6) {var val = 'Scadenza';}             
                if (column[0] == 7) {var val = 'Stato';}
                if (column[0] == 8) {var val = 'Operatore';}
                prog++;
                var select = $('<select id="resizing_select' + prog + '" onclick="stopPropagation(event)" style="max-width:200px"><option value="" selected>' + val + '</option></select>')
                    .appendTo( $(column.header()).empty() )
                    .on('change', function () {
                                               var val = $.fn.dataTable.util.escapeRegex($(this).val());                                               
                                               if (column[0] == 2 || column[0] == 4 || column[0] == 6) 
                                               {
                                                 if (val == 'null') {$('div.dataTables_processing').show(); setTimeout(function(){column.search( '^$', true, false).draw(); $('div.dataTables_processing').hide();},0);}
                                                 else {$('div.dataTables_processing').show(); setTimeout(function(){column.search( val ? val + '+' : '', true, false).draw(); $('div.dataTables_processing').hide();},0);}
                                               }
                                               else 
                                               {
                                                 var indexSelect = $(this).prop('selectedIndex');                                          
                                                 if (indexSelect != 0 && val == '') {$('div.dataTables_processing').show(); setTimeout(function(){column.search('^' + val + '$', true, false).draw(); $('div.dataTables_processing').hide();},0);}
                                                 else {$('div.dataTables_processing').show(); setTimeout(function(){column.search( val ? '^' + val + '$' : '', true, false).draw(); $('div.dataTables_processing').hide();},0);}
                                               }
                                              } 
                       );
 
                if (column[0] == 2 || column[0] == 4 || column[0] == 6) 
                {
                  var arrayDate = [];
                  var i = 0;
                  column.data().unique().each( function (d, j) { 
                                                                 if (d == null) {select.append('<option value="' + d + '"></option>');}
                                                                 else 
                                                                 {
                                                                   var data = d.substring(0,10);
                                                                   var res = data.split("/");
                                                                   var dateNumber = res[2] + res[1] + res[0];
                                                                   if (!arrayDate.includes(dateNumber)){arrayDate[i] = dateNumber; i++;}
                                                                 }
                                                               }
                                              );
                  if (arrayDate.length > 0)
                  {
                    arrayDate.sort();
                    if (column[0] == 2 || column[0] == 4) {arrayDate.reverse();}
                    var arrayDateNew = [];
                    var i2 = 0;
                    for (i = 0; i < arrayDate.length; i++) {arrayDateNew[i2] = arrayDate[i].substring(6,8) + "/" + arrayDate[i].substring(4,6) + "/" + arrayDate[i].substring(0,4); i2++;}
                    for (i2 = 0; i2 < arrayDateNew.length; i2++) {select.append('<option value="' + arrayDateNew[i2] + '">' + arrayDateNew[i2] + '</option>');}
                  }                                           
                }
                else {column.data().unique().sort().each( function (d, j) {select.append('<option value="' + d + '">' + d + '</option>')});}
                
                var selectHidden = $('<select id="width_tmp_select' + prog + '" style="display:none;max-width:200px"><option id="width_tmp_option' + prog + '"></option></select>').appendTo( $(column.header()) );
                var idSelect = "resizing_select" + prog;
                var idTmpSelect = "width_tmp_select" + prog;
                var idTmpOption = "width_tmp_option" + prog;
                $('#' + idTmpOption).html($('#' + idSelect + ' option:selected').text()); 
                $('#' + idSelect).width($('#' + idTmpSelect).width());
            });
        },      
        dom: '<"row"<"col-sm-6"l><"col-sm-5"f>B>rt<"row"<"col-sm-5"i><"col-sm-7"p>>',
        buttons: [{extend: 'excel', exportOptions: {columns: [1,2,3,4,5,6,7,8]}}
                 ],                      
        order: [[ 2, "desc" ]],
        lengthMenu: [[numRows, 50, 100, 250], [numRows, 50, 100, 250]],
        // lengthMenu: [[numRows, 50, 100, 250, -1], [numRows, 50, 100, 250, "Tutti"]], --> Con header fisso troppo lento quindi non oltre le 500 righe per pagina      
        sPaginationType: "full_numbers",
        language: {
             lengthMenu:  "Visualizza _MENU_ righe per pagina",
             search:      "Cerca:",
             zeroRecords: "Nessun record trovato",
             info:        "Righe totali: _MAX_ - Pagina _PAGE_ di _PAGES_",
             infoEmpty:   "Nessun record presente",
             paginate: {first:    '«',
                        previous: '‹',
                        next:     '›',
                        last:     '»'},
             aria: {paginate: {first:    'First',
                               previous: 'Previous',
                               next:     'Next',
                               last:     'Last'}
                   },
             infoFiltered: "(Righe trovate: _TOTAL_)",
        }
    } );
    $('div.dataTables_processing').hide();
} );

Sorry for my english

rf1234

Maybe not a direct reply to your question but you might want to consider to use a plug in like busy load; works perfect for me.

When loading the table(s) I display a spinner

$.busyLoadFull("show", { 
//                fontawesome: "fa fa-refresh fa-spin fa-3x fa-fw"
    fontawesome: "fa fa-spinner fa-spin fa-3x fa-fw"
//                fontawesome: "fa fa-cog fa-spin  fa-3x fa-fw"
});

When everything is done I do this:

$(document).ajaxStop(function () {
    $('#content').fadeIn('fast');
    $.busyLoadFull("hide", { 
      // options here 
    });  
});   

This is what you need for it:

<!-- Busy Load JS -->
<script src="https://cdn.jsdelivr.net/npm/busy-load/dist/app.min.js"></script>

<!-- Busy Load CSS -->
<link href="https://cdn.jsdelivr.net/npm/busy-load/dist/app.min.css" rel="stylesheet">

If you want to use the fontawesome options of busy load you would also need to have font awesome installed I guess.

Giulo

i wouldn't use a plugin.

I don't understand why the processing message is show only when I sort columns.

Ok, my select header columns not have datatable control but when i call draw function I would have expected to see the proccessing message too.

Same with select page row.

I know that initial load time depend by server side then I can't display message but after page download I think that all redraw functions execution still on client side

Giulo

I've try to:

PreDrawCallback: function () {$(".dataTables_processing").show(); return true;}, 
DrawCallback: function () {$(".dataTables_processing").hide();},

nothing

MSLtd

Hi @Giulo It looks like you may be missing, or experiencing an issue with a character in your DOM attribute.

If you take a look at the page in the documentation: processing, you can see the comment by IanRCarter:
"If the processing indicator does not show, check if you are using a custom 'dom' option. The letter 'r' represents the processing indicator so if it's not showing, that could be missing. See https://datatables.net/reference/option/dom"

Giulo

Hi @MSLtd, my DOM is:

dom: '<"row"<"col-sm-6"l><"col-sm-5"f>B>rt<"row"<"col-sm-5"i><"col-sm-7"p>>',

Letter "r" is ok and I've processing message on sort but not for select rows for page or select heder columns

MSLtd

quick note: if you use the suffix 'js' as below, when you post some script the page will format it nicely and make it easier to read
```js
... //your JS here
```

Could you make a test case of your program so I can have a fiddle:
http://live.datatables.net/
If you're not sure how to do this there's documentation here:
https://datatables.net/manual/tech-notes/9

Cheers

Giulo

@MSLtd I'm not be able to use live datatable...I've try to load processing on base example and I show message only when I sort columns, same my program

I've see the documentation and I think that it's not supported when I change select rows page.

If i enable this option...

preDrawCallback: function(settings) {$(".dataTables_processing").show(); return true;}, 
drawCallback: function(settings) {$(".dataTables_processing").hide();},

... I see nothing. If I put alert for show and hide I see immediatly show alert and at the end of datatable load I see hide alert.

Then it's like:

$("#message").show();
myDrawDatatable();
$("#message").hide();

He don't wait myDrawDatatable() end and call immediatly hide message.

I've found a workaround like this:

$("#message").show();
var timeoutID = window.setTimeout(myDrawDatatable(), 0);
$("#message").hide();

But It's work only with chrome...with Firefox ignore delay.

O.T. Firefox ignore delay setInterval too

MSLtd

Hmm, perhaps you could call show before you draw the table and then use drawCallback() to call the hide function? That way the delay is caused by the function taking time to process

Giulo

@MSLtd only this two option to manage datatable preDrawCallback and drawCallback. Delay for execute myDrawDatatable it's his time, I can't do nothing...I must wait his ending and then call hide but I don't know how do it

MSLtd

@Giulo Can you show me your myDrawDatatable() function? I might be able to offer more insight if I know what exactly it does

Giulo

@MSLtd it was an example.
I must show message before:

column.search( val ? val + '+' : '', true, false).draw();

and only at draw ended I must hide message

I dont't know if it's possible with callback

MSLtd

My apologies @Giulo , I was slightly mistaken as to the function of drawCallback() ... Another suggestion I have is to custom set the callback of the ajax, so that when the ajax is complete it calls your hide function?
This may override the data-tables native callback and stop it loading information, so be wary of that, and be prepared to manually invoke the tableDraw from the ajax if that is the case.

Here's some supporting documentation if you decide to do this:
https://datatables.net/reference/option/ajax

Giulo

And if I try with callback?

If the order of execution must be:

$("#message").show();
column.search( val ? val + '+' : '', true, false).draw();
$("#message").hide();

How can I write? show first of column-search and hide only when draw function is totaly ended.

Giulo

@MSLtd I'm not sure but I try this and works fine!

                                                  $.ajax({beforeSend: function(){$("#loadMessage").show();},
                                                          success: function(response){column.search( val ? '^' + val + '$' : '', true, false).draw();},
                                                          complete:function(data){$("#loadMessage").hide();}
                                                        });

MSLtd

Nice! I'm glad to know that it won't overwrite the table draw as well