Детализируемая деталь foreach / дочерний ряд

Question

Я хочу, чтобы выводить каждый ряд данных

скажем, у меня есть данные AJAX, как это

"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"
},

Я хочу создать детализируемую детскую строку для product & price массив следующая ссылка здесь

Я только редактирую скрипт в function format чтобы удовлетворить мои потребности, как это

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>';
}

он работает довольно хорошо... я могу отображать данные, как я хочу.. но я должен определить $loop руководство...

Я пытался с помощью $loop = "'+d.product.length+'"
когда я echo что вар в php
это отображение реальной стоимости
(скажи, что у меня есть 3 массив в product это дисплей 3 тоже)

но как-то, когда это входит for раздел это как $loop стать 0
потому что не отображать anyrow (если я установил условие $i<=$loop показывается одна деталь в каждом ряду родителей)

я тоже нашел что-то странное
$loop = "'+d.product_.length+'" . "'+d.product_.length+'";
echo $loop ==> 33 (скажем, если количество продуктов массив 3 )

но если я изменю это на sum это результат 0
$loop = "'+d.product_.length+'" + "'+d.product_.length+'";
echo $loop ==> 0 (скажем, если количество продуктов массив 3 тоже)

как решить, чтобы я мог знать, сколько циклов должен делать мой скрипт

Answer 1

Вам не нужно php здесь, чтобы добавить вашу дополнительную таблицу с циклом, вы можете использовать jquery"s $.each.. Вам просто нужно построить структуру тела таблицы до append как показано ниже:

/* 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');
        }
    });
});

Примечание: произошла ошибка в вашем click event.. Вы пытались dTable.row в том случае, когда, как это должно быть table.row так как вы держите ссылку в table переменная.

DEMO