javascript - Datatable foreach detailchild row - Stack Overflow

admin管理员组

文章数量:1391792

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 bee 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

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 bee 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

• javascript
• jquery
• ajax
• datatables

Share Improve this question Follow edited Feb 2, 2016 at 7:08 Surya Matadewa asked Feb 2, 2016 at 3:15 Surya MatadewaSurya Matadewa 1,02755 gold badges1919 silver badges4040 bronze badges 4

• @GuruprasadRao don't have idea how to add my ajax datasource in demo...but i guess it's like this jsfiddle/nnb97rh9/47 would you mind help edit so my ajax data (in top post) can be included? – Surya Matadewa Commented Feb 2, 2016 at 3:57
• @GuruprasadRao my problem basicly is to set var $loop automaticly...but i guess php messing around when it es to set $loop with javascript var.....i guess i take wrong aproach – Surya Matadewa Commented Feb 2, 2016 at 4:07
• @GuruprasadRao can you give example, not quite understand..i'm still learning ajax & jquery :D..i will add my real data to my post too...wait a minute – Surya Matadewa Commented Feb 2, 2016 at 4:18
• @GuruprasadRao i just need to copy returned json in console.log right..if not...can you give me link tutorial how can i get correct json data? – Surya Matadewa Commented Feb 2, 2016 at 4:41

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

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./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

本文标签： javascriptDatatable foreach detailchild rowStack Overflow