Child row from example of rows().every not working

Gix

I'm trying to get a child row to appear with data for each row that loads and is visible and stays visible.

This is my code:

<script>
$(document).ready(function(){
    /* Initialize datatables, set options */
    var table = $('#order_table').DataTable( {
            "processing": true,
            "serverSide": true,
            "ajax":"orders/ajax",
            "columns": [
                { data: 'id', name: 'checked_id' },
                { data: 'created_at', name: 'created_at' },
                { data: 'id', name: 'id' },
                { data: 'printed', name: 'printed' },
                { data: 'to_firstname', name: 'to_firstname' },
                { data: 'to_lastname', name: 'to_lastname' },
                { data: 'tax', name: 'tax' },
                { data: 'subtotal', name: 'subtotal' }
            ],
            'columnDefs': [{
                'targets': 0,
                'searchable':false,
                'orderable':false,
                'className': 'dt-body-center',
                'render': function (data, type, full, meta){
                    return '<input type="checkbox" name="invoices_to_print[]" value="' + $('<div/>').text(data).html() + '">';
                }
            }],
            'order': [[1, 'asc']],
            'pageLength': 50
    } );

    table.rows().every( function ( rowIdx, tableLoop, rowLoop ) {
        this
                .child(
                        $(
                                '<tr>'+
                                '<td>'+rowIdx+'.1</td>'+
                                '<td>'+rowIdx+'.2</td>'+
                                '<td>'+rowIdx+'.3</td>'+
                                '<td>'+rowIdx+'.4</td>'+
                                '</tr>'
                        )
                )
                .show();
    } );
});
</script>

HTML:

                    <h3>Orders - Received</h3>
                    <form action="../invoice/bulk" method="post">
                        <table id="order_table" class="table double-row">
                            <thead>
                                <tr>
                                    <th>Print</th>
                                    <th class="header">Date</th>
                                    <th>Num</th>
                                    <th>Printed</th>
                                    <th>First Name</th>
                                    <th>Last Name</th>
                                    <th>Tax</th>
                                    <th>Subtotal</th>
                                </tr>
                            </thead>

                        </table>
                        <input type="submit">
                    </form>

The table.rows().every() function is directly taken from one of the examples. The table loads fine and pulls the correct data and everything, there are no errors thrown, but no child rows appear. Please help!

allan

Your table data is being loaded via Ajax (i.e. it is asynchronous). This when your rows().every() method executes the data hasn't been loaded yet and there are no rows. Use initComplete to execute code once the data has loaded.

Allan