Как инициализировать Datatable после ajax вызова

Question

Я пытаюсь получить данные из базы данных, а затем добавить их в столбцы таблицы с помощью вызовов ajax jquery. Как только я получаю данные и добавляю их в Datatable, я теряю функциональность Datatable, что нормально, так как я динамически добавляю данные и мне нужно повторно инициализировать плагин. Но проблема заключается в том, что всякий раз, когда я инициализирую его, я получаю сообщение об ошибке «Предупреждение DataTables: таблица id = приводит к списку списков - невозможно повторно инициализировать DataTable». Я пошел по ссылке и применил каждый шаг, который они заявили, но я все еще получаю ошибку! Вот мой 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>

Вот вызов функции Ajax

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

            });

        }

Обратите внимание, что я прочитал другие посты, но либо решения устарели, либо вызывают те же ошибки снова. Пожалуйста, помогите!

Answer 1

Я думаю, что проблема может заключаться в том, что вы уничтожаете datatable, но никогда не инициализируете его.

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

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

Посмотрите, работает ли это для вас.