Datatable - rows().data().each() function not working

Question

I am trying to run through the rows after the table has been created, then remove the the css class from that first td for any rows that didn't have any child details, with these code:

oTable.rows().data().each(function(value, index, id){
    alert('hmm');
    var node = oTable.row(index).node();

    if(value.container_cnt === 0){
    alert('hi');

    $(node).find("td.childShow:before").removeClass("td.childShow:before");
    }
});

However the each() function does not seems to be working. Whyyyyy?

Full code of the table:

function(data) {
    var oTable = $('#childInfoTable').DataTable( {  
    ajax: 'childData',
    "dom": 'rt',
    select:"single",
    "columns": [
                {
                "className": 'childShow',
                "orderable":  false,
                "defaultContent": '',
                width:"15px"
                },
             { "data": "id" },
             { "data": "name" },
             ],
             "order": [[1, 'asc']]
            });

    oTable.rows().data().each(function(value, index, id){
        alert('hmm');
        var node = oTable.row(index).node();

        if(value.container_cnt === 0){
            alert('hi');
            $(node).find("td.childShow:before").removeClass("td.childShow:before");
        }
    });

https://jsfiddle.net/nnb97rh9/700/

Answer 1

Because you are loading data through Ajax, therefore by the time when table.rows().data().each() method calling, there is no data loaded yet, hence nothing in the loop will be invoked. A simple fix would be put the code inside the callback of the draw event. Thus the code will run every time after data loaded.

table.on('draw', function(){
  table.rows().data().each(function(value, index){
  alert('why it not coming in?');
  var node = table.row(index).node();

  if(value.container_cnt === 0){
  alert('hi');

  $(node).find("td.details-control").removeClass("td.details-control");
}

Updated jsfiddle: https://jsfiddle.net/s048cw6w/