У меня есть DataTable, в котором есть скрытые дочерние строки для отображения дополнительной информации.Каждый родительский ряд показывает информацию о подарочной карте, а скрытые дети показывают журнал этой подарочной карты.Подарочная карта может содержать 0+ журналов.
Например:
- Подарочная карта 1: 0 строк;подарочная карта была только создана (не зарегистрирована), ничего больше
- Подарочная карта 2: 2 строки: подарочная карта была погашена один раз за 10 долларов США, а другая, отдельно, за 15 долларов США
Моя проблема в том, что таблица создает дочерний элемент только для первого журнала любого заданного GC.Мне нужно, чтобы он создал дочерний элемент для каждого журнала для этого GC.
Я знаю, что мой код специально нацелен на [0] в массиве, я просто не знаю, как сделать необходимые изменения вделать то, что я хочу.
Вот моя таблица в HTML / PHP:
<table id='giftCertInfo' class='table table-striped'>
<thead>
<tr>
<th></th>
<th>Gift Cert #</th>
<th>Gift Card #</th>
<th>Issue Date</th>
<th>Amount</th>
<th>Balance</th>
<th>Customer Name</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<?php
foreach ($allGiftCertsList as $value) {
$giftCertLogQuery = pg_execute($rs_conn, "gift_cert_log", array($value['all_gift_cert_id'], $value['gift_card_id']));
$giftCertLogList = pg_fetch_all($giftCertLogQuery);
if (pg_num_rows($giftCertLogQuery) > 0) {
echo "<tr data-child-value-1='" . $giftCertLogList[0]['all_gift_cert_id'] . "' data-child-value-2='" . $giftCertLogList[0]['adj_date'] . "' data-child-value-3='" . $giftCertLogList[0]['adj_type'] . "' data-child-value-4='" . $giftCertLogList[0]['amount'] . "' data-child-value-5='" . $giftCertLogList[0]['note'] . "'>";
echo "<td class='details-control'></td>";
echo "<td class='col-xs-2'>" . $value['all_gift_cert_id'] . "</td>";
echo "<td class='col-xs-2'>" . $value['gift_card_id'] . "</td>";
echo "<td class='col-xs-2'>" . date("D, M. j, Y", strtotime($value['issue_date'])) . "</td>";
echo "<td class='col-xs-1'>$" . $value['amount'] . "</td>";
echo "<td class='col-xs-1'>$" . $value['balance'] . "</td>";
echo "<td class='col-xs-2'>" . $value['customer_name'] . "</td>";
echo "<td class='col-xs-1'></td>";
echo "</tr>";
} else {
echo "<tr>";
echo "<td class='col-xs-1'></td>";
echo "<td class='col-xs-2'>" . $value['all_gift_cert_id'] . "</td>";
echo "<td class='col-xs-2'>" . $value['gift_card_id'] . "</td>";
echo "<td class='col-xs-2'>" . date("D, M. j, Y", strtotime($value['issue_date'])) . "</td>";
echo "<td class='col-xs-1'>$" . $value['amount'] . "</td>";
echo "<td class='col-xs-1'>$" . $value['balance'] . "</td>";
echo "<td class='col-xs-2'>" . $value['customer_name'] . "</td>";
echo "<td class='col-xs-1'></td>";
echo "</tr>";
}
}
unset($value); // Unset the foreach value
?>
</tbody>
</table>
И следующий jQuery для создания дочерних строк:
function format(gc_id, date, type, amount, note) {
return "<div class='col-xs-offset-1'><b>GC ID:</b> " + gc_id + "</div><div class='col-xs-offset-1'><b>Date:</b> " + date + "</div><div class='col-xs-offset-1'><b>Type:</b> " + type + "</div><div class='col-xs-offset-1'><b>Amount:</b> " + amount + "</div><div class='col-xs-offset-1'><b>Note:</b> " + note + "</div>";
};
$(document).ready(function(){
var table = $('#giftCertInfo').DataTable({
"order": [[6, "asc" ], [3, "asc"]]
});
// Add event listener for opening and closing details
$('#giftCertInfo').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( tr.data('child-value-1'), tr.data('child-value-2'), tr.data('child-value-3'), tr.data('child-value-4'), tr.data('child-value-5') )).show();
tr.addClass('shown');
}
});
});
Thisвот как это выглядит сейчас:
И вот как я хочу, чтобы это выглядело:
