How to initialize Datatable after ajax call

Question

I'm trying to get data from Database then append it in table columns using ajax jquery calls. Once i get the data and add it to the Datatable i lose the Datatable functionality which is normal since i'm dynamically adding data and i have to reinitialize the plugin. But the problem is whenever i initialize it i get and error stating "DataTables warning: table id=leadsListTable - Cannot reinitialize DataTable". I went to the link and applied every step they stated, yet i still get an error ! Here's my The HTML

<div class="table-responsive">
    <table class="table invoice-data-table dt-responsive nowrap" id="leadsListTable" style="width:100%">
       <thead>
             <tr>
                <th></th>
                <th></th>
                <th><span class="align-middle">Client#</span></th>
                <th>Name</th>
                <th>Phone</th>
                <th>Adresse</th>
                <th>Source</th>
                <th>Status</th>
                <th>Action</th>
             </tr>
        </thead>
        <tbody id="leadsList">

        </tbody>
     </table>
</div>

Here's the Ajax function call

function showAllClients(){

        $.ajax({
                type: 'ajax',
                url: '<?php echo base_url() ?>leads/showAllClients',
                async: false,
                dataType: 'json',
                success: function(data){
                    console.log(data)
                    var html ='';
                    for(i=0;i < data.length;i++){
                        html += '<tr>'+
                                    '<td></td>'+
                                    '<td></td>'+
                                    '<td>'+data[i].lead_ID+'</td>'+
                                    '<td>'+data[i].lead_Name+'</td>'+
                                    '<td>'+data[i].lead_Phone+'</td>'+
                                    '<td>'+data[i].lead_Adresse+'</td>'+
                                    '<td>'+data[i].lead_Source+'</td>'+ 
                                    '<td>'+data[i].lead_Status+'</td>'+ 
                                    '<td><a href="#">Edit</a></td>'+
                             '</tr>';
                    }
                    $('#leadsList').html(html);
                    $("#leadsListTable").dataTable({ //Tried this still getting the same error
                        "destroy": true,
                    });

                },
                error: function(){
                    alert('Could not get Data from Database');
                }

            });

        }

Note that i did read other posts but either the solutions are outdated or they cause the same errors again. Please help !

Answer 1

I think that the problem might be that you destroy the datatable but never reinitialize it.

// Destroy the table
// Use $("#leadsListTable").DataTable().destroy() for DataTables 1.10.x
$("#leadsListTable").dataTable().fnDestroy()

// Reinitialize
$("#leadsListTable").dataTable({
    // ... skipped ...
});

See if this works for you.