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

看看这是否适合您。

Ajax调用后如何初始化Datatable

1 个答案: