After Reload or drawCallback

After Reload or drawCallback

huertoVerdehuertoVerde Posts: 24Questions: 7Answers: 0

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?

This question has accepted answers - jump to:

Answers

  • huertoVerdehuertoVerde Posts: 24Questions: 7Answers: 0

    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,
            ...
    
  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736
    edited November 2021 Answer ✓

    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

  • huertoVerdehuertoVerde Posts: 24Questions: 7Answers: 0
    edited November 2021

    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');
        }
    },
    
  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736
    Answer ✓

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

    Kevin

  • huertoVerdehuertoVerde Posts: 24Questions: 7Answers: 0

    Perfect! Thank you!

  • huertoVerdehuertoVerde Posts: 24Questions: 7Answers: 0
    edited November 2021

    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?

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736

    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

  • huertoVerdehuertoVerde Posts: 24Questions: 7Answers: 0

    YEES i just found that!

Sign In or Register to comment.