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
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 tryingdTable.rowin the event where as it has to betable.rowsince you are holding reference intablevariable.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments