How can I make DataTable.row.add working faster ?

Geoffrey

Hello, I would like to know how is it possible to add row on my table, faster ? Because it tooks more than 1 minute to add 200 row (30 columns).

What I do, in order that I call the functions ...

function initialize_all_datatable()
    {
        $.extend( true, $.fn.dataTable.defaults, {        
            // deferRender: true,
            order: [[0, "asc"]],
            scrollX:true,
            scrollY: "500px",
            fixedColumns: {
                leftColumns: 1
            },
            dom: 'Bfrtip',        
            scrollCollapse: true,
            paging: false           
        });     
    }

var table_liste_materiel;
    function initialize_datatable_liste_materiel()
    {
        var tableau= document.getElementById("table_liste_materiel");
        var thead = tableau.tHead;
        var tfoot = tableau.tFoot;
        var row_head = thead.insertRow(-1);

        for (var i=0;i<tab_thead_table_liste_materiel.length;i++){
            var th = document.createElement('th');
            th.innerHTML=tab_thead_table_liste_materiel[i];
            row_head.appendChild(th);
        }


        var row_foot= tfoot.insertRow(-1);

        for (var i=0;i<tab_tfoot_table_liste_materiel.length;i++){
            var th = document.createElement('th');
            th.innerHTML=tab_tfoot_table_liste_materiel[i];
            row_foot.appendChild(th);
        }

        tableau.className="cell-border hover display nowrap";


        $('#table_liste_materiel tfoot th').each( function (i) {
            var title = $(this).text();
            if (title!="")  $(this).html( '<input type="text" size=10 placeholder="'+title+'" data-index="'+i+'" />' );
        } ); 
        table_liste_materiel = $('#table_liste_materiel').DataTable({       
            buttons: [
                { 
                    text:'Visibilité colonnes',
                    extend: 'colvis',
                    collectionLayout: 'fixed four-column', 
                    columns: ':not(:first-child)'
                }, {
                    extend: 'csvHtml5',
                    exportOptions: {
                        columns: ':visible'
                    },
                    fieldSeparator: ';',
                    title: 'liste_materiel_base_metro'
                },{
                    text: 'Rafraichir',
                    action: function ( e, dt, node, config ) {
                        get_liste_materiel();
                    }
                }
            ],
            "fnRowCallback": function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
                var index_statut="", index_maintenance="", index_etalonnage="", index_verification="", liste_index=new Array();
                for (var index_tab=0;index_tab<tab_thead_table_liste_materiel.length;index_tab++){
                    if(tab_thead_table_liste_materiel[index_tab]=="Statut") {
                        index_statut=index_tab;
                    }
                    else if(tab_thead_table_liste_materiel[index_tab]=="Date prévisionnelle de retour de maintenance") {
                        liste_index.push(index_tab);
                    }
                    else if(tab_thead_table_liste_materiel[index_tab]=="Date prévisionnelle de retour de vérification") {
                        liste_index.push(index_tab);
                    }
                    else if(tab_thead_table_liste_materiel[index_tab]=="Date prévisionnelle de retour d'étalonnage") {
                        liste_index.push(index_tab);
                    }
                    else if(tab_thead_table_liste_materiel[index_tab]=="Date du prochain étalonnage") {
                        liste_index.push(index_tab);
                    }
                    else if(tab_thead_table_liste_materiel[index_tab]=="Date de la prochaine vérification") {
                        liste_index.push(index_tab);
                    }                   
                    else if(tab_thead_table_liste_materiel[index_tab]=="Date de retour du prêt") {
                        liste_index.push(index_tab);
                    }
                }

                var continuer_check=true;

                if (index_statut!=="") {            
                    if (aData[index_statut]=="Réformé"){         
                        $(nRow).addClass('row_purple');
                        $(nRow).css({"text-decoration":"line-through"});
                        continuer_check=false;
                    }
                }

                if(continuer_check){
                    for (var i=0;i<liste_index.length;i++){
                        if (aData[liste_index[i]].split("-").length==3 && new Date(aData[liste_index[i]])<new Date()){  
                            $(nRow).addClass('row_blue');
                            continuer_check=false;
                            break;
                        }
                    }
                }   

                if (continuer_check && index_statut!=="") {             
                    if (aData[index_statut].indexOf("En ") != -1 || aData[index_statut]===""){       
                        $(nRow).addClass('row_red');
                    }
                    else if (aData[index_statut].indexOf("Retour ") != -1){      
                        $(nRow).addClass('row_green');
                    }                   
                }
            }
        }); 


        $(table_liste_materiel.table().container()).on('keyup', 'tfoot input', function () {
            table_liste_materiel
                .column($(this).data('index'))
                .search(this.value)
                .draw();
        });

    }

function get_liste_materiel()
    {
        var url = "php/get_liste_materiel.php";
        ajax_call_async(url, function(json){
            erreur=json["erreur"];
            tableau_liste_materiel=json["tableau_liste_materiel"];

            if (erreur===""){               
                table_liste_materiel
                    .clear()
                    .draw();
                for (var i=0;i<tableau_liste_materiel["num_iple"].length;i++){
                    var tab_ligne=new Array();
                    var statut=tableau_liste_materiel["statut"][i];
                    for (var j=0;j<tab_nom_sql_liste_materiel.length;j++){
                        if (tableau_liste_materiel[tab_nom_sql_liste_materiel[j]][i]==null) tableau_liste_materiel[tab_nom_sql_liste_materiel[j]][i]="";
                        if (tab_nom_sql_liste_materiel[j]=="date_retour_pret"){
                            if(statut=="En prêt") tab_ligne.push(tableau_liste_materiel[tab_nom_sql_liste_materiel[j]][i]);
                            else tab_ligne.push("Pas en prêt actuellement");
                        }
                        else if (tab_nom_sql_liste_materiel[j]=="date_previsionnelle_retour_maintenance"){
                            if(statut=="En maintenance") tab_ligne.push(tableau_liste_materiel[tab_nom_sql_liste_materiel[j]][i]);
                            else tab_ligne.push("Pas en maintenance actuellement");
                        }
                        else if (tab_nom_sql_liste_materiel[j]=="date_previsionnelle_retour_verification"){
                            if(statut=="En vérification") tab_ligne.push(tableau_liste_materiel[tab_nom_sql_liste_materiel[j]][i]);
                            else tab_ligne.push("Pas en vérification actuellement");
                        }
                        else if (tab_nom_sql_liste_materiel[j]=="date_previsionnelle_retour_etalonnage"){
                            if(statut=="En étalonnage") tab_ligne.push(tableau_liste_materiel[tab_nom_sql_liste_materiel[j]][i]);
                            else tab_ligne.push("Pas en étalonnage actuellement");
                        }                   
                        else if (tab_nom_sql_liste_materiel[j]=="date_prochaine_verification"){
                            if(statut!="En vérification") tab_ligne.push(tableau_liste_materiel[tab_nom_sql_liste_materiel[j]][i]);
                            else tab_ligne.push("Actuellement en vérification");
                        }
                        else if (tab_nom_sql_liste_materiel[j]=="date_prochain_etalonnage"){
                            if(statut!="En étalonnage") tab_ligne.push(tableau_liste_materiel[tab_nom_sql_liste_materiel[j]][i]);
                            else tab_ligne.push("Actuellement en étalonnage");
                        }   
                        else {
                            tab_ligne.push(tableau_liste_materiel[tab_nom_sql_liste_materiel[j]][i]);   
                        }           
                    }                   
                    table_liste_materiel.row.add(tab_ligne).draw(false);    
                }
            }

            $( window ).resize();
            // table_liste_materiel.draw(false);
        });     
    }

allan

Don't call draw() inside the loop. Do it outside - there is no point is redrawing the table when you know you are going to immediately add another row :-)

Allan

Geoffrey

Oh ok ! yeah this is far better now !

But really I don't understand If I have to do: table_liste_materiel.draw(true) or table_liste_materiel.draw(false) ?

So did that:

table_liste_materiel.row.add(tab_ligne);    
                }
            }
            table_liste_materiel.draw();

Also, I have another issue now, before I initialize my dataTable, I do that

$.fn.dataTableExt.afnFiltering.push(
            function( oSettings, aData, iDataIndex ) {
                var nTr = oSettings.aoData[iDataIndex].nTr;
                if (nTr!=null){
                    if (nTr.className.match(/row_/)){
                        if (oSettings.nTable.getAttribute('id')=="table_liste_alerte"){
                            if (nTr.className.match(/row_yellow/)){
                                if (document.getElementById("checkbox_liste_alerte_urgent").checked) return true;
                                else return false;
                            }
                            else if (nTr.className.match(/row_orange/)){
                                if (document.getElementById("checkbox_liste_alerte_tres_urgent").checked) return true;
                                else return false;
                            }
                            else if (nTr.className.match(/row_red/)){
                                if (document.getElementById("checkbox_liste_alerte_hors_date").checked) return true;
                                else return false;
                            }
                        }
                        else if (oSettings.nTable.getAttribute('id')=="table_liste_materiel"){
                            if (nTr.className.match(/row_red/)){
                                if (document.getElementById("checkbox_liste_materiel_indisponible").checked) return true;
                                else return false;
                            }
                            else if (nTr.className.match(/row_green/)){
                                if (document.getElementById("checkbox_liste_materiel_disponible").checked) return true;
                                else return false;
                            }
                            else if (nTr.className.match(/row_blue/)){
                                if (document.getElementById("checkbox_liste_materiel_hors_date").checked) return true;
                                else return false;
                            }
                            else if (nTr.className.match(/row_purple/)){
                                if (document.getElementById("checkbox_liste_materiel_reforme").checked) return true;
                                else return false;
                            }
                        }
                        else if (oSettings.nTable.getAttribute('id')=="table_liste_documentation"){
                            if (nTr.className.match(/row_grey/)){
                                if (document.getElementById("checkbox_liste_documentation_materiel_sans_documentation").checked) return true;
                                else return false;
                            }                       
                        }               
                    }
                    else return true;  
                }
            }
        );

Because I want to colorize some row, And I have checkbox to chose which row the user want to see... The issue is that I have the checkbox for row_purple which is unchecked at the beginning, but I can see the purples rows ... it was not doing it before.

But are you agree to say that $.fn.dataTableExt.afnFiltering is calling when I do a draw(); right ?

allan

But really I don't understand If I have to do: table_liste_materiel.draw(true) or table_liste_materiel.draw(false) ?

As the draw() documentation explains, if you pass false the paging will not be reset. Otherwise it will.

But are you agree to say that $.fn.dataTableExt.afnFiltering is calling when I do a draw(); right ?

Yes - the external filtering functions will be called on draw (unless you are using server-side processing - which you aren't, but I should note it anyway).

Allan