Add child row on event xhr ajax reload not working

azifi

Hello everyone, Im new to datatable.
I have problem when add child row after ajax reload function. I need to add child row on every table. I can catch event on 'xhr.dt'. But it cant add child row, but if i add my code initComplete it work. What happened ?
this my code:

$('#button-reload').on('click', function{
            table.ajax.reload();
});
function addChildRow() {
       table.rows().every( function (rowIdx, tableLoop, rowLoop) {
            var data = this.data();
            this.child(
                'name :' + data.name+ '<br>' 
                 +'category : ' + data.categ +'<br>'
            ).show()
        });
}
table.on('xhr.dt', function () {
        addChildRow() ;
    });

Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

colin

I suspect it's because the xhr is called when the ajax request is completed, but the data hasn't yet been added to the table. You could wait for that data to be processed by triggering on the draw, something like this example here:

  let reloaded = false;
 
  table.on('xhr', function() {
    console.log('xhr callback triggered');
    reloaded = true;
  }); 
  
  table.on('draw', function() {
    console.log('draw callback triggered');
    
    if (reloaded) {
      console.log('add child rows here');
      reloaded = false;
    }
  }); 

Colin