Creating Multiple Child Rows [HTML/PHP/jQuery]

WolfieeifloW

I have a DataTable that has hidden child rows to show extra information. Each parent row shows information about a gift card and the hidden children show a log of that gift card. A gift card could have 0+ logs.

For example:

• Gift Card 1: 0 rows; the gift card has only been created (isn't logged), nothing else
• Gift Card 2: 2 rows: the gift card has been redeemed once for $10 and another, separate time, for $15

My issue is the table creates a child for only the first log of any given GC. I need it to create a child for each and every log for that GC.

I know my code specifically targets [0] in the array, I just don't know how to go about making the required changes to do what I want.

The following is my table in 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>

And the following jQuery to do the child rows:

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 is what it looks like now:

And this is what I want it to look like:

colin

Hi @WolfieeifloW ,

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin