Question

我有一个DataTable，其中有隐藏的子行以显示其他信息。每个上一行显示有关礼品卡的信息，而隐藏的子级显示该礼品卡的日志。一张礼品卡可能有0多个日志。

例如：

礼品卡1：0行；礼品卡仅被创建（未记录），没有其他内容
礼品卡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)?

希望这会有所帮助

DataTables动态子行

1 个答案: