ajax调用后如何初始化Datatable

Question

我正在尝试从数据库中获取数据，然后使用 ajax jquery 调用将其附加到表列中。一旦我获得数据并将其添加到数据表中，我就会失去数据表功能，这是正常的，因为我正在动态添加数据并且我必须重新初始化插件。但问题是每当我初始化它时，我都会收到错误提示“DataTables 警告：表 id=leadsListTable - 无法重新初始化 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 ...
});

看看这是否适合你。