Javascript 数据表-多个表的动态初始化

在我的应用程序中，我需要在模式弹出窗口中构建动态（thead和tbody）数据表。通过我的代码，我能够使用materializecss创建动态表。但是，当我单击第二个表链接时，前面的表内容不会被清除。因此，为所有动态表内容复制相同的数据。我用下面的一行来破坏这个表。但获取此错误“Uncaught TypeError:无法读取未定义的”的属性“aDataSort”

$（“#dataSyncTbl”）.dataTable（）.fnDestroy（）

但它不起作用。这是我的密码

HTML代码：

<div id="dataSyncModal" class="modal" style="width:65%">
            <button class="modal-close btn-flat">X</button>
            <div class="modal-content" id="dataSyncModalContent">
                <table id="dataSyncTbl"></table>
                <div class="row center-align" id="dataSyncSpinner">
                    <h1>&nbsp;</h1>
                    <div class="preloader-wrapper small active">
                        <div class="spinner-layer spinner-blue-only">
                            <div class="circle-clipper left">
                                <div class="circle"></div>
                            </div><div class="gap-patch">
                                <div class="circle"></div>
                            </div><div class="circle-clipper right">
                                <div class="circle"></div>
                            </div>
                        </div>
                    </div>
                    <h1>&nbsp;</h1>
                </div>

            </div>
        </div>
    </div>

$(document).on("click", ".openQueryMdl", function (event) {
                $("#dataSyncModal").openModal();
                var sortId = $(this).attr("data-sort-id");
                $('#dataSyncTbl thead').remove();
                $('#dataSyncTbl tbody').remove();
                $("#dataSyncTbl").dataTable().fnDestroy();
                alert(sortId);
                var data = {
                    "customcols": ['ID', 'Type', 'Name', 'AssetClass', 'test3'], "mydata": [{ "ID": "2", "Type": "No Fund/Product Found", "Name": "", "AssetClass": "Private Equity", "Dateasof_Passed": "", "test3": "" },
                            { "ID": "1", "Type": "No Fund/Product Found", "Name": "", "AssetClass": "Private Equity", "Dateasof_Passed": "", "test3": "" }]
                };
                if (sortId == 7) {

                data = {
                    "customcols": ['ID', 'Type', 'Name', 'AssetClass', 

'test3', 'test1', 'test2'], "mydata": [{ "ID": "4", "Type": "No Fund/Product Found", "Name": "", "AssetClass": "Private Equity", "Dateasof_Passed": "", "test3": "", "test1": "11", "test2": "eee" },
                                { "ID": "5", "Type": "No Fund/Product Found", "Name": "", "AssetClass": "Private Equity", "Dateasof_Passed": "", "test3": "", "test1": "11", "test2": "eee" }]
                };

            }
            else if (sortId == 15) {


            }
            loadQueryDetails(data);
        });
    });

    function loadQueryDetails(data) {
        console.log(data.customcols.length);
        $("#dataSyncSpinner").addClass("hide");

        var mainData = data.mydata;
        var column_names = data.customcols;
        var columns = [];
        for (var i = 0; i < column_names.length; i++) {
            columns[i] = {
                'title': column_names[i],
                'data': column_names[i]
            }
        };
    //    $("#dataSyncTbl").dataTable().fnDestroy();
        $('#dataSyncTbl').DataTable({
            columns: columns,
            data: mainData,
            "bSort": false,
            "searching": false,
            "bInfo": false,
            "paging": false,
            "destroy": true
        })
    }

X
$（文档）.on（“单击”，.openQueryMdl”，函数（事件）{
$（“#dataSyncModal”）.openModal（）；
var sortId=$（this.attr（“数据排序id”）；
$（'#dataSyncTbl thead'）。删除（）；
$（'#dataSyncTbl tbody'）.remove（）；
$（“#dataSyncTbl”）.dataTable（）.fnDestroy（）；
警报（sortId）；
风险值数据={
“customcols”：['ID'、'Type'、'Name'、'AssetClass'、'test3']、“mydata”：[{“ID”：“2”，“Type”：“未找到任何基金/产品”，“Name”：“AssetClass”：“Private Equity”，“Dateasof_Passed”：“test3”：“}，
{“ID”：“1”，“类型”：“未找到任何基金/产品”，“名称”：“资产类别”：“私募股权”，“通过日期”：“测试3”：“}]
};
if（sortId==7）{
数据={
“customcols”：['ID'，'Type'，'Name'，'AssetClass'，
“test3”、“test1”、“test2']、“mydata”：[{“ID”：“4”、“类型”：“未找到任何基金/产品”、“名称”：“资产类别”：“私募股权”、“通过日期”：“test3”：“test1”：“11”、“test2”：“eee”}，
{“ID”：“5”，“类型”：“未找到任何基金/产品”，“名称”：“资产类别”：“私募股权”，“通过日期”：“测试3”：“测试1”：“11”，“测试2”：“eee”}]
};
}
else if（sortId==15）{
}
loadQueryDetails（数据）；
});
});
函数loadQueryDetails（数据）{
console.log（data.customcols.length）；
$（“#datasyncpinner”）.addClass（“隐藏”）；
var mainData=data.mydata；
var column_names=data.customcols；
var列=[]；
对于（变量i=0；i

fndrostroy（）

不是官方API。使用

$（“#dataSyncTbl”）.dataTable（）.destroy（true）取而代之

有关更多信息，请参阅。
我尝试使用上述代码。但是我得到了这个错误'uncaughttypeerror:cannotreadproperty'aDataSort'的undefined'我认为你不应该手动删除thead和tbody。在调用
destroy（）
之前，请尝试删除行“$（'#dataSyncTbl thead'）.remove（）；”和“$（'#dataSyncTbl tbody'）.remove（）”。我也尝试了这些行，但出现了一个错误“uncaughttypeerror:无法读取未定义的属性“style”，这可能是因为第一次调用
destroy（）时未初始化表）
您可以通过在if语句中包装destroy（）来解决此问题：`if（$.fn.DataTable.isDataTable（'.#dataSyncTbl tbody'）{…destroy（）}；