DataTables split array value and render to multi table in single child row

You can build a sub-table inside your format(d) function - something like this:

function format (d) {
    var sub_table = '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">';
    
    var sub_rows = d.AVAINFO;
    var array_length = sub_rows.length;
    var sub_row = '';

    if (array_length) { // AVAINFO is an array of values:
      for (var i = 0; i < array_length; i++) {
        sub_row = '<tr><td>' + sub_rows[i].RECIPE + '</td><td>' + sub_rows[i].ava + '</td></tr>';
        sub_table = sub_table + sub_row;
      }
    } else { // AVAINFO is a single object - not an array:
      sub_row = '<tr><td>' + d.AVAINFO.RECIPE + '</td><td>' + d.AVAINFO.ava + '</td></tr>';
      sub_table = sub_table + sub_row;
    }

    sub_table = sub_table + '</table>';
    return sub_table;
}

However, bear in mind that the code sample you link to in the question has some other bugs in it, which need to be fixed before my proposed approach will work.

For example, the DataTable refers to non-existent columns (e.g. "targets": [4,5,6,7,8] and elsewhere) and to non-existent data, e.g. Type.

Also, the JSON data in $ajax_data is not valid. It needs to be an array:

$ajax_data = [
  {
    "MACHINE": "A01",
    "STATUS": "ENGTEST",
    "TXN_TIME": "2020/09/17 00:04:15",
    "AVAINFO": [
      { 
        "RECIPE": "8EX-001",
        "ava": "Z03341#25#A9161#P#Z03934#5#A9021#P"
      },
      {
        "RECIPE": "8EX-005",
        "ava": "Z80597#3#B3542#L"
      }
    ],
    "ID": "1"
  },
  {
    "MACHINE": "A03",
    "STATUS": "IDLE",
    "TXN_TIME": "2020/11/30 21:25:43",
    "AVAINFO": {
      "RECIPE": "8PI",
      "ava": "Z90018#25#B1825#P#Z80238#20#B1115#P#Z20018#13#B0095#L#"
    },
    "ID": "2"
  }
];

I reference other related disscusions then solved this by add .splice(), .slice(), and use loop to create sub-row.

function separate(arr, size) {
  let res = [];
  while (arr.length) {
    res.push(arr.splice(0, size));
  }
  return res;
}

function format ( d ) {
  var tr = '';
  d.AVAINFO.forEach(function (item) {
    var  a = item.ava.split("#");
    result = separate(a, 4)   
    //console.log(result);
  tr += '<tr>'+          
            '<th>Recipe</th>'+
            '<th>ORDER</th>'+
            '<th>QTY</th>'+
            '<th>CODE</th>'+
            '<th>TYPE</th>'+
        '</tr>';
  
    for (i=0; i<result.length; i++) {
        tr += '</tr>'+
        '<tr>'+
            '<td>'+item.RECIPE+'</td>'+
            '<td>'+result[i][0]+'</td>'+
            '<td>'+result[i][1]+'</td>'+
            '<td>'+result[i][2]+'</td>'+
            '<td>'+result[i][3]+'</td>'+
        '</tr>';
    }
  });
  
    return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
      tr +
      '</table>';
}