Question

我正在使用datatable jQuery插件将数据填充到表中。当用户按下按钮并将数据填充到表格时，我需要从ajax调用中获取数据。

我的ajax呼叫代码是这样的：

function getJsonReport() {
            var startDate = $('#start_date').val();
            var endDate = $('#end_date').val();
            $.get('MonthlyReportAjax', {startDate : startDate , endDate : endDate}, function(responseText) {               

                var tableBody="";
                for(var x = 0 ; x < responseText["monthRecord"].length ; x++){
                    tableBody += "<tr><td>"+ responseText["monthRecord"][x].date +"</td>"+
                                      "<td>"+ responseText["monthRecord"][x].newSearch +"</td>"+
                                      "<td>"+ responseText["monthRecord"][x].newSubscribers +"</td>"+
                                      "<td>"+ responseText["monthRecord"][x].pm12 +"</td>"+
                                      "<td>"+ responseText["monthRecord"][x].pm3 +"</td>"+
                                      "<td>"+ responseText["monthRecord"][x].pm6 +"</td>"+
                                      "<td>"+ responseText["monthRecord"][x].newAdds +"</td>"+
                                   "</tr>"
                }

                $('#dailyTableBody').html(tableBody);
                $('#tableID').DataTable();
            });
        }

第一次它工作正常，但如果用户再次按下按钮，则会出错：

无法重新初始化DataTable。

要检索此表的DataTables对象，请不传递参数或查看bRetrieve和bDestroy的文档

Answer 1

如果您要保留现有的实施，以下内容将起作用。您遇到的问题是错误消息指出：您无法初始化已存在的新DataTable，因此您必须将其销毁并重新创建，类似于以下内容。

DataTables Destroy API调用是您所需要的。

示例（未经测试）：

$('#submit').on( 'click', function () {
    var table = $('#myTable').dataTable() || false;
    if (table) {
        table.api().destroy();
    }
    getJsonReport(); // Run your update function
});

注意 dataTable部分。调用api()时需要此语法。

您的getJsonReport()功能将保持不变。我实际上会在DataTable上使用不同的设计模型，它自包含DataTable的所有逻辑，然后使用API专门做任何更新。这需要重构表如何生成表，所以我不想包含它，但如果你想看到我的数据表方法（我必须在工作中使用这个库多年，直到我们去Angular;））和我很乐意提供它。

希望这有帮助。

Answer 2

以下代码未经测试，但它应该会在我上面的评论中向您显示我的建议，并会对您进行一些调整。它让DataTable可以完成所有的提升。它取代了getJsonReport，在加载时初始化并使用go按钮启动数据提取。

$(document).ready(function (){
        $("#tableID").DataTable({columns:[{data:"date"}, {data:"newSearch"}, {data:"newSubscribers"}, {data:"pm12"}, {data:"pm3"}, {data:"pm6"}, {data:"newAdds"}],
            deferLoading:0,
            dom""Bt",
            serverSide:true,

            buttons:[{text:"Go", action: function(){
                $("#tableID").DataTable().ajax.reload();
            }}],
            ajax: {type:"get",
                dataSrc:"",
                url:'MonthlyReportAjax',
                data: function () {return {startDate : $('#start_date').val() , endDate : $('#end_date').val()}
                } 
            }
        });

})

Answer 3

在java脚本中输入此代码......

 $('#idTable').dataTable({
     destroy: true
      });

datatable jquery无法重新初始化DataTable

3 个答案: