Nested Data Table Not Working

memrlee

Please can you help with the following. I am trying to insert a table (id='exampleTable_1' )within a child row in my parent table (id= 'meet_datatable'). I have a third table which sits outside of the patent table at the bottom of the page - just for testing purposes (id='testTable'). I am using the following code.

function loadMeetDataTable () {
    
    $.ajax ( {
        url: './meetings/meet_load_ajax.php',
        method: 'GET',
        dataType: 'json',
        success: function (data) {
            console.log(data);
            console.log("success");
            
            
            var table = $('#meet_datatable').DataTable ( {
                "searching": false,
                "sort": false,
                data:data,
                select: {
                    style: 'os'
                },
                responsive: true,
                columns: [
                    { 'data': null },
                    {
                        "data": null,
                        "className":      'details-control',
                        "orderable":      false,
                        "defaultContent": ''
                    },
                    { 'data': 'meeting_id' },
                    { 'data': 'stage_desc' },
                    { 'data': 'meeting_title' },
                    { 'data': 'meeting_desc' },
                    { 'data': 'meeting_date_time' },
                    { 'data': 'meeting_location' },
                    { 'data': 'rep_required' },
                    { 'data': 'logged_by' },
                    { 'data': 'start_date' }
                ],
                "columnDefs": [ {
                    "targets": -11,
                    "data": null,
                    "defaultContent": "<button class='btn btn-xs'>Select</button>"
                }, 
                {
                    "targets": -3,
                    "className": "dt-body-center",
                    "render": function (data, type, full, meta){
                        var is_checked = data == true ? "checked" : "";
                        return '<input type="checkbox" class="checkbox" ' + is_checked + ' disabled />';
                       }
                }]
            }); 
            console.log("success2");
           
            
            // Add event listener for opening and closing details
            $('#meet_datatable 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(displayChildRow).show();
                    tr.addClass('shown');
                    
                    var promised =loadStageTaskTable('get case tasks', 78);
                    promised.done(function(data){
                        console.log(data);
                        $('#testTable').DataTable ( {
                            "searching": false,
                            "sort": false,
                            "paging": false,
                            data:data,
                            select: {
                                style: 'os'
                            },
                            responsive: true,
                            columns: [
                                { 'data': null },
                                { 'data': 'task_id' },
                                { 'data': 'task_title' },
                                { 'data': 'task_desc' },
                                { 'data': 'task_due_date' },
                                { 'data': 'allocated_to' },
                                { 'data': 'logged_by' },
                                { 'data': 'start_date' }
                            ],
                            "columnDefs": [ {
                                "targets": -8,
                                "data": null,
                                "defaultContent": "<button class='btn btn-xs btn-primary'>Select</button>"
                            }]
                        });
                        
                        $('#exampleTable_1').DataTable ( {
                            "searching": false,
                            "sort": false,
                            "paging": false,
                            data:data,
                            select: {
                                style: 'os'
                            },
                            responsive: true,
                            columns: [
                                { 'data': null },
                                { 'data': 'task_id' },
                                { 'data': 'task_title' },
                                { 'data': 'task_desc' },
                                { 'data': 'task_due_date' },
                                { 'data': 'allocated_to' },
                                { 'data': 'logged_by' },
                                { 'data': 'start_date' }
                            ],
                            "columnDefs": [ {
                                "targets": -8,
                                "data": null,
                                "defaultContent": "<button class='btn btn-xs btn-primary'>Select</button>"
                            }]
                        });
                    });
                    
                    promised.fail(function(){
                        console.log("failed");
                    });
                }
            } );

        },
        failure: function (data) {
            console.log ("failed");
        }
    });
}

The code works fine in so far as it inserts a child row and adds the table (exampleTable_1) with its headers. But as soon as it tries to apply the datatable plugin to this table the table simply disappears, although the child row remains.

I've also used exactly the same html as exampleTable_1 and added a table at the bottom of my page called testTable. The datatable plugin is applied succesfully to this table. Please can you tel me where I am going wrong.

The html for both exampleTable_1 and testTable is:

<table id="relevantTableID">
        <thead> 
            <tr>
                <th>Select</th>
                <th>ID</th>
                <th>Task Title</th>
                <th>Desc</th>
                <th>Due Date/Time</th>
                <th>Allocated To</th>
                <th>Logged By</th>
                <th>Date Logged</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>

The AJAX is all working fine because the testTable works fine so I just need to understand why the nested exampleTable_1 disappears. Please can you help.

Much appreciated.

memrlee

HI there. I'm still stuck on this. Is anybody able to advise please?