Responsive.display.childRowImmediate not working properly?

1kgcoffee

Trying to do something like this, populate with children but have details open by default:
https://datatables.net/extensions/responsive/examples/display-types/immediateShow.html

The child rows will populate and the details-control will open/close, but it set to close by default. Oddly enough, when I shrink the window, the contents of the main table will spill over into a second child row, which WILL be open on refreshing the page, but not include the details coded for. When clicking the details control, the second child disappears, clicking again, the child row that was coded for appears.

Here is the code:

    function format ( data ) {
    // `d` is the original data object for the row
    return '<!--table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;"-->'+
        '<tr>'+
            '<td>slab 1 temp:</td>'+
            '<td>'+data[3]+'</td>'+
        '</tr>'+
        '<tr>'+
            '<td>slab 2 temp:</td>'+
            '<td>'+data[4]+'</td>'+
        '</tr>'+
    '<!--/table-->';

    };

    var dataTable = $('#latest_readings').DataTable({
        "retrieve": true,
        "paging":true,
        "processing":true,
        "serverSide":true,
        "scrollCollapse": true,
        responsive: {
            details: {
                display: DataTable.Responsive.display.childRowImmediate,
                target: '',
                type: 'none'
            }
            },
        //"order": [],
        "info":true,
        "ajax":{
            url:"fetch_readings.php",
            type:"POST"
               },
        "columnDefs":[
                {
                "targets":[0,1,2,3,4,5,6,7,9,10,11,12],
                "orderable":false,
                 },
                ],    
                //"order": [[1, 'asc']],
    "columns": [
            {
                "class":          'details-control',
                "orderable":      false,
                "data":           null,
                "defaultContent": ''
            }],
        });

        // Add event listener for opening and closing details
        $('#latest_readings').on('click', 'td.details-control', function () {
        var tr = $(this).parents('tr');
        var row = dataTable.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(row.data()) ).show();
            tr.addClass('shown');
        }
    } );

And the HTML for the table:

                <table  id="latest_readings" class="display table table-striped">
                    <thead>
                        <tr class="table-primary">
                            <th>ID</th>   
                            <th>Created At</th>
                            <th>Made By</th>         
                            <th>MB1</th> 
                            <th>MB2</th> 
                            <th>Hot Brine</th>   
                            <th>Cold Brine</th>   
                            <th>Active</th>   
                            <th>Suction</th>  
                            <th>Discharge</th>     
                            <th>Oil Pressure</th>
                            <th>Oil Temperature</th>
                            <th>Water Temperature</th>                            
                        </tr>  
                    </thead>
                </table>

Any ideas? I've been fiddling around for hours, looking at all the examples and questions around responsive and childRowImmediate and can't seem to find any answers. I also have the correct libraries loaded and there are no errors in the debugger.

    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.2/css/jquery.dataTables.min.css">
....
<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
<!--script src="https://cdn.datatables.net/1.13.2/js/jquery.dataTables.min.js"></script-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/2.0.5/js/dataTables.js"></script>
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
<script src="https://cdn.datatables.net/responsive/3.0.2/js/dataTables.responsive.js"></script>
<script src="https://cdn.datatables.net/responsive/3.0.2/js/responsive.dataTables.js"></script>

colin

At a glance, the code looks OK - it would be worth updating to DataTables 2, but nothing obvious stands out there.

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.

Colin

kthorngren

One issue is that the space used for the Responsive child rows conflicts with the Child detail rows. Both can't be used. You will need to use the Responsive modal display instead. See the Compatibility matrix for more info.

Kevin