在我的应用程序中,我需要在模态弹出窗口中构建动态(thead和tbody)数据表。使用我的代码,我可以使用materializecss创建动态表。但是,当我单击第二个表链接时,不会清除以前的表内容。因此,为所有动态表内容复制相同的数据。我使用以下行来销毁表。但是得到这个错误'未捕获的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> </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> </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
})
}
答案 0 :(得分:0)
fnDestroy()
不是官方API。请改用$("#dataSyncTbl").dataTable().destroy(true);
。