[英]Datatable foreach detail/child row
我想顯示foreach子行數據表
可以說我有這樣的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+'"
當我在php中echo
該var時
顯示真實價值
(例如我在product
也有3
數組,它也顯示3
)
但不知何故,當它進入for
部分就好像$loop
變為0
因為不顯示行(如果我將條件設置為$i<=$loop
則它在每行父對象中顯示一行細節)
我也發現了一些奇怪的東西
$loop = "'+d.product_.length+'" . "'+d.product_.length+'"
$loop = "'+d.product_.length+'" . "'+d.product_.length+'"
;
echo $loop
==> 33
(例如產品數組計數是否為3
)
但是,如果我將其更改為sum
則結果為0
$loop = "'+d.product_.length+'" + "'+d.product_.length+'"
;
echo $loop
==> 0
(例如,如果產品數組計數也為3
)
如何解決它,所以我可以知道我的腳本應該執行多少次循環
您實際上並不需要php
在循環中添加額外的表,而是可以使用jquery
的$.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
變量中,因此它必須是table.row
。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.