Datatables.net child isShown returns wrong result

General
1

I have a Datatable and want to show extra information in child. I use the same code as here: DataTables example - Child rows (show extra / detailed information)

But on first click on first column the child is not shown. The source code before clicking:

<tr></tr>

after first click the arrow shows downwards and sourcecode looks like this:

<tr class="dtr-expanded"></tr>

after second click the child is shown (arrow shows to the right) and code looks like this:

<tr class="dt-hasChild selected"></tr>

If I debug the code in js “row.child.isShown()” returns false on first click. Maybe there is a problem with the select-column?

thx in advance

©a-x-i

2 
<table id="example" class="display" style="width:100%">
    <thead>
        <tr>
            <th></th>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </thead>
    <tbody>
        <!-- Data Rows Here -->
    </tbody>
</table>


$(document).ready(function() {
    var table = $('#example').DataTable({
        "columnDefs": [
            {
                "className": 'details-control',
                "orderable": false,
                "targets": 0
            }
        ],
        "order": [[1, 'asc']]
    });

    // Add event listener for opening and closing details
    $('#example tbody').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(row.data())).show();
            tr.addClass('shown');
        }
    });
});

// Formatting function for row details
function format(d) {
    // `d` is the original data object for the row
    return '<div>' +
        '<strong>Full name:</strong> ' + d[1] + '<br>' +
        '<strong>Extension number:</strong> ' + d[2] + '<br>' +
        '<strong>Extra info:</strong> ' + d[3] +
        '</div>';
}


td.details-control {
    background: url('data:image/svg+xml;charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path d="M7 10l5 5 5-5H7z"/></svg>') no-repeat center center;
    cursor: pointer;
}

tr.shown td.details-control {
    background: url('data:image/svg+xml;charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path d="M7 14l5-5 5 5H7z"/></svg>') no-repeat center center;
}

Troubleshooting Checklist

  1. Check Initialization Code: Ensure the DataTable initialization code is correct and includes the necessary configurations for child rows.
  2. Inspect Event Handling: Verify that the click event listener for toggling child rows is correctly bound and triggers as expected.
  3. Verify Data: Ensure that the format function correctly returns HTML for the child row details and that the data passed to it is as expected.
  4. Debugging:
  • Use browser developer tools to inspect the HTML structure and verify if child rows are being added correctly.
  • Check for any JavaScript errors in the console that might indicate issues with the code.
  1. Library Version Compatibility: Ensure that you are using compatible versions of DataTables and any other related libraries or plugins.