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 !

sauhardnc · Accepted Answer · 2020-05-02 18:44:56Z

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.

answered May 2, 2020 at 18:44

sauhardnc

1,9612 gold badges8 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

12 Comments

Zakaria Sichaib Over a year ago

Thanks man it did work for sure but i lose all the extensions functionnality ! the select and the responsiveness ! i get a table not like the one i had before adding data !, is there a way to fix that ?

sauhardnc Over a year ago

$("#leadsListTable").dataTable({ //define all the parameters as you did before here }); <br>This should do the deed.

Zakaria Sichaib Over a year ago

the thing is i did copy and paste the parameters and yet somehow i still have errors ,is so frustrating i've spent the last 7 hours on that problem....

sauhardnc Over a year ago

Have you tried using ajax.reload()? If not, check the details here - <a>datatables.net/reference/api/ajax.reload() </a>

Zakaria Sichaib Over a year ago

i've read about it but i didn't understand how i implement it here, should i add the : ajax: "data.json" to the parameters?

|

Collectives™ on Stack Overflow

How to initialize Datatable after ajax call

1 Answer 1

12 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

12 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related