datatable jquery无法重新初始化DataTable答案

【问题标题】：datatable jquery Cannot reinitialise DataTabledatatable jquery无法重新初始化DataTable
【发布时间】：2014-11-27 04:03:39
【问题描述】：

我正在使用 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 的文档

【问题讨论】：

我可以提供一个示例使用场景，但是这个用法需要你在页面渲染时创建HTML表格，并通过DataTables运行AJAX调用。它还将使用更多的 DataTable 选项。不幸的是，我不在办公桌前，但我会在明天的某个时间在这里提供。
好的，谢谢。我会等的。

标签： javascript jquery datatable

【解决方案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 ;)）和我很乐意提供。

希望这会有所帮助。

【讨论】：

我们需要在重新初始化之前销毁表吗？另一个问题是第一次加载表时它没有正确分页。那怎么做呢？
你能给我提供你的数据表方法吗？示例代码？
您正在使用字符串创建表，然后使用 DataTable。您应该将数据传递给数据表并让它完成整个工作。

【解决方案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()}
                } 
            }
        });

})

【讨论】：

【解决方案3】：

在java脚本中输入这段代码...

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

【讨论】：