After Reload or drawCallback

huertoVerde

Hello,

I am having trouble calling a function after the data is loaded into the Table.
The data is being called by a Ajax. Witch loads the data depending on what radio is selected or whats saved in the cookies.
This works perfectly. After I click another radio and click a Button another Data is loaded this also works perfectly.

After the data is loaded I need to call a function wich loops thru the table and adds a class to each row so i can make a treeGrid out of the table. Ths function is called makeTree().

Ive tried calling the make function withe the drawCallBack like this

arbeitsTabelle = $('#arbeitsTabelle').DataTable({
        retrieve: true,
        paging: false,
        info: false,
        searching: true,
        ordering:false,
        select:true,            
        scrollX: true,
        scrollY: '70vh',
        scrollCollapse: true,
        stateSave: true,
        "drawCallBack": function(settings) {
            console.log( 'DataTables has finished drawing.' );
            makeTree();
          },
        ajax:{
            url: "/arbeitsepis",
            type: "GET",
            data: function(dx){
                let g=getGeschaeftsfeld();
                if (g==""){                     
                    dx.checked = getCookie("checkedGF");
                }else{
                    dx.checked = g;
                }                       
            }
        },
        columns: [
            { data: "id" },
            { data: "pid" },
            { data: "vorgaenger" },
            { data: "geschaeftsfeld" },
            { data: "marke" },
            { data: "zielgruppe" },
            { data: "verwendung" },
            { data: "detail" },
            { data: "name" },
            { data: "status" },
            { data: "datum" },
            { data: "betrag", render: $.fn.dataTable.render.number( '.', ',', 0, '€' ) },
            { data: "kommentar" },
            { data: "lieferant" },
            { data: "wurzel" },
        ], 
        dom: "Bfrt",
        buttons: [
            { extend: "create", editor: editor },
            { extend: "edit",   editor: editor },
            { extend: "remove", editor: editor },
            { text: "aufklappen", action: function(){$('.tree').treegrid('getRootNodes').treegrid('expand');}},
             "colvis",

        ],

    })

To reload or to change the data i click on a button that calls the ajax.reload() method.
How ever as Ajax is asynchronous make tree is called and for a split second i see that it works, but when the data is finishe Loading it the effect of make tree disappear. When i reload the data and Make the tree with to different buttons it works as wished.

$("#load-dt").click( function loadDatax() {             
    arbeitsTabelle.ajax.reload();
    //makeTree();           
}); 


This works, but i dont want this to happen  
$("#make").click( function () {         
    makeTree();
}); 

So my question is. How can i call my makeTree() function after the Data has finishe loading?

huertoVerde

something else ive tried is this...

arbeitsTabelle = $('#arbeitsTabelle').on('xhr.dt', function ( e, settings, json, xhr ) {
            makeTree();
        } ).DataTable({
        retrieve: true,
        paging: false,
        info: false,
        searching: true,
        ordering:false,
        ...

kthorngren

drawCallback is the one to use to call makeTree(). I will be called after the data is loaded/reloaded and drawn on the page.

You might look at using rowCallback and move your makeTree() code into that function. Its called for each row that is drawn instead of all rows.

If you want help debugging please provide a link to your page or a test case replicating the issue. Otherwise its hard to say what the problem is because we don't know what makeTree() is doing.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

huertoVerde

so i noticed my mistake with drawCallBack, somewhere in the documentation it is written with B and not b. I could not find it again.

Your sugestion of rowCallback is even better though! Thanks for that.

little followup on that. I adde this, and it is addin all the class to my tr in the thead and not in the tbody why is that? and how can i change it?

rowCallback: function(row, data){
    if (row==0){
          $("tr").addClass('treegrid-' + data.id) ;
        }else {
            $("tr").addClass('treegrid-' + data.id + ' treegrid-parent-' + data.pid );
        }
        if (data.status=='ETAT' || data.status=='ETATp'){
        $("tr").addClass('red');
    }
},

kthorngren

The row parameter is the row's node. Try using it instead, something like this $( row ).addClass(...) .

Kevin

huertoVerde

Perfect! Thank you!

huertoVerde

Last question.
is there a way to know what row it is? as you can see in my code the class of the first row (root) is diferent then the others. row==0 is completley wrong, how can i know witch row it is?

kthorngren

There are other parameters for rowCallback that give three different row indexes. See if one of the indexes is the one you are looking for.

Kevin

huertoVerde

YEES i just found that!