Datatable foreach detail/child row

Question

I want to display foreach child row datatable

lets say I have ajax data like this

"data": [
{
  "date"      : "1/17/2016",
  "supplier"  : "supplier1",
  "total"     : "$10",
  "payment"   : "Cash",
  "product" : Array[2] 
     0: "product1"
     1: "product2"
  "price" : Array[2]
     0: "$5"
     1: "$5"
},
{
  "date"      : "2/1/2016",
  "supplier"  : "supplier2",
  "total"     : "$3",
  "payment"   : "Cash",
  "product" : Array[1] 
     0: "product1"
  "price" : Array[1]
     0: "$3"
},
{
  "date"      : "1/17/2016",
  "supplier"  : "supplier3",
  "total"     : "$15",
  "payment"   : "Cash",
  "product" : Array[3] 
     0: "product1"
     1: "product2"
     2: "product3"
  "price" : Array[2]
     0: "$3"
     1: "$5"
     2: "$7"
},

I wanna create datatable child row for product & price array following link here

I only edit script in function format to meet my need like this

function format ( d ) {
    // `d` is the original data object for the row
    return '<table class="table table-border table-hover">'+
      '<tr>'+
         '<td>Product</td>'+
         '<td>Price</td>'+
      '</tr>' +

      '<?php 
          $loop = 5; 
          echo $loop;             <-- here

          for ($i=0; $i<$loop; $i++) {                      
             echo "<tr><td>'+d.product['$i']+'</td> <td>'+d.price['$i']+'</tr>"; 
       } ?>' +

    '</table>';
}

it's run quite well...I can display data like i want..but i must define $loop manual...

I tried using $loop = "'+d.product.length+'"
when i echo that var in php
it's display real value
(say i have 3 array in product it's display 3 too)

but somehow when it's enter for section it's like $loop become 0
because not display anyrow (if i set condition to $i<=$loop it's dispaly one row detail in every row parents)

i found something weird too
$loop = "'+d.product_.length+'" . "'+d.product_.length+'";
echo $loop ==> 33 (say if product array count is 3)

but if I change it to sum it's result 0
$loop = "'+d.product_.length+'" + "'+d.product_.length+'";
echo $loop ==> 0 (say if product array count is 3 too)

how to solve it, so i can know how many looping should my script do

Answer 1

You don't really need php here to append your extra table with a loop, rather you can use jquery's $.each.. You just need to construct your table body structure prior to append as below:

/* Formatting function for row details - modify as you need */
function format ( d ) {
    console.log(d.product);
    var trs=''; //just a variable to construct
    $.each($(d.product),function(key,value){
        trs+='<tr><td>'+value+'</td><td>'+d.price[key]+'</td></tr>';
        //loop through each product and append it to trs and am hoping that number of price 
        //values in array will be equal to number of products
    })
    // `d` is the original data object for the row
    return '<table class="table table-border table-hover">'+
           '<thead>'+
              '<th>Product</th>'+
                '<th>Price</th>'+  
           '</thead><tbody>' 
               + trs +
        '</tbody></table>';
}

$(document).ready(function() {
    var table = $('#example').DataTable({
        "ajax": 'https://raw.githubusercontent.com/kshkrao3/JsonFileSample/master/Employees.json',
        "columns": [
            {
                "class":          'details-control',
                "orderable":      false,
                "data":           null,
                "defaultContent": ''
            },
            { "data": "date"},
            { "data": "supplier"},
            { "data": "total"},
            { "data": "payment"}
        ]
    });

    // 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
          row.child( format(row.data()) ).show();
          tr.addClass('shown');
        }
    });
});

Note : There was an error in your click event.. You were trying dTable.row in the event where as it has to be table.row since you are holding reference in table variable.

DEMO