Can enable Child-Row Click when building Table from server-side

timcadieux

Attempting to use the example from here to enable Child rows using the below..the clickable Icon never appears. Any idea what's wrong?

<table id="Table" class="table table-striped table-bordered display dt-responsive" style="width:100%">
    <thead>
        <tr role="row">
            <th></th>
            <th scope="col" >title</th>
            <th scope="col" >author</th>
            <th scope="col" >published</th>
                <th></th>
        </tr>
    </thead>
    <tbody>
            foreach (var item in Model.Entries)
            {
                <tr role="row">
                    <td>
                        <div class="btn-group btn-group-sm">
                            <a asp-controller="AdminFeedBin" asp-action="ListFeedbinEntries" asp-route-id="@item.feed_id" class="btn btn-info"><i class="fas fa-eye"></i></a> &nbsp;&nbsp;
                            <a asp-controller="AdminFeedBin" asp-action="Delete" asp-route-id="@item.feed_id" class="btn btn-danger"><i class="fas fa-trash"></i></a>
                        </div>
                    </td>
                    <td>@item.title</td>
                    <td>@item.author</td>
                    <td>@item.published</td>
                    <td class="details-controls"></td>
                </tr>
            }
    </tbody>
</table>

    $(function () {

        $('#Table').DataTable({
            "paging": true,
            "lengthChange": true,
            "searching": true,
            "order": [[ 3, "desc" ]],
            "info": true,
            "autoWidth": false,
            "responsive": true
        });

        /* Formatting function for row details - modify as you need */
        function format ( d ) {
            // `d` is the original data object for the row
            return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
                '<tr>'+
                    '<td>Full name:</td>'+
                    '<td>'+ d.content +'</td>'+
                '</tr>'+
                '<tr>'+
                    '<td>Extension number:</td>'+
                    '<td>'+d.summary+'</td>'+
                '</tr>'+
                '<tr>'+
                    '<td>Extra info:</td>'+
                    '<td>And any further details here (images etc)...</td>'+
                '</tr>'+
            '</table>';
        }

        // Add event listener for opening and closing details
        $('#Table tbody').on( 'click', 'tr td.details-control', function () {

            alert('test');

            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');
            }
        } );

    });

kthorngren

You haven't defined a column for the details-control class which displays the icon. You will need to add the column in your foreach (var item in Model.Entries) loop. And use columnDefs to apply the Datatables config, like this:

        "columnDefs": [
            {
                "targets": 0,
                "className":      'details-control',
                "orderable":      false,
                "data":           null,
                "defaultContent": ''
            }

Kevin

timcadieux

A mixture of your response, I also noticed on the examples I cited that there is are <styles> required, as well as this example, I got it working, thx!