Datatable on FireFox and IE: during load messagge "script stop running"

Giulo

Hi,
I'm loading a datatable which returns me 7500 rows.
first I run a query that takes abount 3 seconds to load a JSON array and then render the datatable.
in Chrome it takes about 5 seconds then total 8 sec.

I integrated the following features:
- headerFixed
- responsive for calculate correct header columns width
- deferRender
- initComplete where create a list for each column by creating options based on unique relative values
- Footer with exclusive search for column

in short, a lot of stuff but the loading time I find it acceptable.
In order to understand the timing of loading and to make it available to users I have introduced a loading message that is displayed before loading the datatable and immediately hide at the end.
In chrome i see this:
"In attesa di risposta da localhost..." (I think it's related to the execution time of the query)
My loading message for 5 seconds then datatable loaded

In FireFox and IE it's a total disaster.
For example in Firefox i see:
"In attesa di localhost" for about 3 sec
"Trasferimento dati da localhost" for few seconds then I see a message windows that say about script busy or unresponsive and firefox is not responding...I immediately click on ok and I see my loading message and the rendering of the datatable is practically immediate.

Usually graphics render in firefox only much faster than chrome (it also shows the fact that after I say to continue the script I render the datatable in a second) but from running the query to rendering what the hell is he doing?

Sorry for my english

For example if I disabled initComplete (then no columns dropdownlist) i ddn't get message script but in any case it is always slower than chrome.

Datatable has the only plugin I use that is slower in firefox than chrome.

$("#loadMessage").show();
var dataSet = <?php echo $json_array ?>;
var myDiv = document.getElementById('areaDati');
// 200px: Corpo principale div "areaDati" compreso di intestazione datatable e paginazione
//  31px: Altezza riga dati datatable
var numRows = Math.floor((myDiv.clientHeight - 200) / 31);
var scrollY = myDiv.clientHeight - 200;
if (numRows < 4){numRows = 4;}

function createDropdowns(api) {
    var prog = 0;   
    var counter = 0;
    api.columns([2,3,4,5,6,7,8]).every(function() {
        var that = this;
        var col = this.index();
        if (col == 2) {var val = 'Modifica';}
        if (col == 3) {var val = 'Numero';}
        if (col == 4) {var val = 'Data';}   
        if (col == 5) {var val = 'Azienda';}                    
        if (col == 6) {var val = 'Scadenza';}               
        if (col == 7) {var val = 'Stato';}
        if (col == 8) {var val = 'Operatore';}
        prog++;
        var selected = $('#resizing_select' + prog).val();
        if (selected === undefined || selected === '') 
        {
          var select = $('<select id="resizing_select' + prog + '" onclick="stopPropagation(event)" style="max-width:200px"><option value="">' + val + '</option></select>')
              .appendTo( $(that.header()).empty() )
              .on('change', function() {
                  var val = $.fn.dataTable.util.escapeRegex($(this).val());
                  if (col == 2 || col == 4 || col == 6) 
                  {
                    if (val == 'null') {that.search( '^$', true, false).draw();}
                    else {that.search( val ? val + '+' : '', true, false).draw();}
                  }
                  else 
                  {
                    var indexSelect = $(this).prop('selectedIndex');                                           
                    if (indexSelect != 0 && val == '') {that.search('^' + val + '$', true, false).draw();}
                    else {that.search( val ? '^' + val + '$' : '', true, false).draw();}
                  }                     
                  createDropdowns(api);
          });

          if (col == 2 || col == 4 || col == 6) 
          {
            var arrayDate = [];
            var i = 0;
            api.cells(null, col, {search: 'applied'}).data().unique().each( function (d) {
                                                         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];
                                                           // NON FUNZIONE CON INTERNET EXPLORER VERSIONE MINORE DI 12.0
                                                           //if (!arrayDate.includes(dateNumber)){arrayDate[i] = dateNumber; i++;}
                                                           if (arrayDate.indexOf(dateNumber) == -1){arrayDate[i] = dateNumber; i++;}                                                           
                                                         }
            });
            if (arrayDate.length > 0)
            {
              arrayDate.sort();
              if (col == 2 || col == 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 {api.cells(null, col, {search: 'applied'}).data().unique().sort().each( function (d) {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( $(that.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());
        }
        else
        {
          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());
          counter++;
          //resizeDatatable();
        }
        // Aggiusto le dimensioni delle colonne in base all'header solo all'ultimo ciclo su ultima colonna e solo in caso di selezione su dropdownlist
        if (col == 8 && counter > 0) {resizeDatatable();}
    });
}

$(document).ready(function() {
    $('#chiamate').DataTable( {
        data: dataSet,
        "deferRender": true,
        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() {createDropdowns(this.api());},                    
        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: {
             processing: "Caricamento in corso...",
             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_)",
        }
    } );
    $("#loadMessage").hide();
} );

As you can see, the first thing I do is display the loading message then why I get this message "Script: http://localhost:8080/scripts/jquery-3.1.1.min.js:3" before loading message displayed?

Before I only do a query:

$query = "select id, anno, numero, data, scadenza, idcliente, idstato, upddate, upduser from chiamate order by upddate desc";
$result = $connection->query($query);
while($row = $result->fetch_array())
{
  ..........
  
   $ar = array(.............................);
   $rows[] = $ar;
}
$json_array = json_encode($rows);

Il load datatable "data" with:

var dataSet = <?php echo $json_array ?>;

If query execution time is maximum 3 seconds because then the rendering is so slow?

colin

Hi @Giulo ,

This section here in the FAQ offers a few things to try to speed up the loading.

I would recommend going through those, and if no joy, we're happy to take a look, but it would help, as per the forum rules, if you could link to a running test case showing the issue so we can offer some help. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

Giulo

I'm sorry colin but I've see this section.
I used the search tool.
I've write my datatable initialize code for understand how kind of load I've do.
With data = JSON array what I've just select data from server then I process all data in my page. Then I don't think ajax or server side processing.
I've try all of set that I've write.

Ok I try to do an example...I wanted to understand the theory to better understand how datatable works...copying code does not make me grow