function separateIt(arr, size) {

​

  // creating a new Array to return

  // to the calling context:

  let res = [];

  while (arr.length) {

​

    res.push(arr.splice(0, size));

  }

​

  // returning the new Array:

  return res;

}

​

function format ( d ) {

    // `d` is the original data object for the row

  //console.log(d);

  var tr = '';

  d.AVAINFO.forEach(function (item) {

    var  a = item.ava.split("#");

    result = separateIt(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++) {

        var addClass = '';

        console.log(result[i][1])

        if(result[i][1] < 25){

          addClass = ' class="red"';

        }

        tr += '</tr>'+

        '<tr>'+

            '<td>'+item.RECIPE+'</td>'+

            '<td>'+result[i][0]+'</td>'+

            '<td' + addClass + '>'+result[i][1]+'</td>'+

            '<td>'+result[i][2]+'</td>'+

            '<td>'+result[i][3]+'</td>'+

        '</tr>';

​

    }

  });

    return '<table id="test" cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+

      tr +

      '</table>';

}

​

var 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"

  }

];

​

​

$(document).ready(function() {

    var table = $('#example').DataTable( {

      data: data,

      order: [[1, 'asc']],

      columns: [

            {

                className:      'details-control',

                orderable:      false,

                data:           null,

                defaultContent: ''

            },

            { data: "MACHINE" },

            { data: "STATUS" },

            { data: "TXN_TIME" },

        ],

        "rowCallback": function( row, data, index ) {

    if ( data.STATUS !== 'PROD' ) {$('td:eq(2)',row).addClass('red');} 

  },

    } );

​

    // Add event listener for opening and closing details

    $('#example tbody').on('click', 'td.details-control', function () {

        var tr = $(this).closest('tr');

        var row = table.row( tr );

        if ( row.child.isShown() ) {

            // This row is already open - close it

            row.child.hide();

            tr.removeClass('shown');

        }

        else {

            // Open this row

            d = row.data();

            row.child( format(d) ).show();

            tr.addClass('shown');

        }

    } );

​

} );