How to reload datatable after success event?

mastersuse

I have nested array json object (Layer 1, Layer 2 and Layer 3). My problem is the dataTable does not reload after success event. In my case, a after modal success closed, the table should reloaded.

I have tried below but not help.

1. $('#myTable').DataTable().ajax.reload();
2. $('.Layer3Table').DataTable().ajax.reload();
3. $('table.Layer3Table').DataTable().ajax.reload();

The table is no problem to me since all information appear as expected. Just unable to reload after success event.

{
    "status": "Success",
    "data": [{
        "project_id": "1",
        "project_name": "project name",
        "l1_task": [{
            "l1_id": "1",
            "l1_name": "Layer 1",
            "l2_task": [{
                "l2_id": "1",
                "l2_name": "Layer 2",
                "l3_task": [{
                        "l3_id": "1",
                        "l3_name": "Layer 3.1"
                    },
                    {
                        "l3_id": "2",
                        "l3_name": "Layer 3.2"
                    }
                ]
            }]
        }]
    }]
}

loadtable();
$('#btnUpdateLayer3Table').on('click',function(){
  
    $.ajax({
        ...
        success: function(response){
            if (response.status == 'Success'){
                $('#successModal').modal('show');
            }
        },
        error: function(e){}
    });

    $('#successModal').on('hidden.bs.modal', function(e) {
        $('#myTable').DataTable().ajax.reload(); // tried but not reload
        $('.Layer3Table').DataTable().ajax.reload(); // tried but not reload
        $('table.Layer3Table').DataTable().ajax.reload(); // tried but not reload
    });

});

function loadtable(){
    var project = '';
    $.ajax({
        url : url,
        crossDomain: true,
        type : 'POST',
        dataType : 'json',
        data: id,
        success: function(response){
            if (response.status == "Success"){
                // Start Layer 1
                $.each(response.data, function(key, value1){
                    project +=
                    "<div class='col-lg-12'>"+
                        "<div class='card-body'>";
                            // Start Layer 2
                            $.each(value1.l2_task, function(key1, value2){
                                project +=
                                // Start Layer 3 (this is the table)
                                "<table id='myTable' class='compact stripe order-column dt-responsive Layer3Table'>"+
                                    "<thead>"+
                                        "<tr>"+
                                            "<th class='text-center'>Action</th>"+
                                            "<th class='text-center'>Activity Name</th>"+
                                            "<th class='text-center'>Owner</th>"+
                                        "</tr>"+
                                    "</thead>";
                                    $.each(value2.l3_task, function(key, value3){
                                        project +=
                                        "<tr>"+
                                            "<td class='text-center'>"+value3.action+"</td>"+
                                            "<td class='text-center'>"+value3.name+"</td>"+
                                            "<td class='text-center'>"+value3.owner+"</td>"+
                                        "</tr>";
                                    }); // end of each Layer 3 (this is the table)
                                    project +=
                                "</table>";
                            }); // end of each Layer 2
                    project += "</div>"+"</div>";
                }); // end of each Layer 1
                $("#projectDetail2").append(project);
                $('table.Layer3Table').DataTable({
                    processing: true,
                    destroy: true,
                });
            }
            else {}
        },
        error: function(e){}
    });
}

colin

This thread should help, it's asking the same thing.

Cheers,

Colin