DataTables 动态子行

Question

我有一个隐藏子行以显示额外信息的 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');
        }
    });
});

这就是现在的样子：

这就是我想要的样子：

Answer 1

请参考我在类似帖子中的回答

How to create jQuery datatable with multiple child rows(nested table)?

希望对你有帮助