数据表-多表动态初始化

Question

在我的应用程序中，我需要在模态弹出窗口中构建动态（thead 和 tbody）数据表。使用我的代码，我可以使用 materializecss 创建动态表。但是当我点击第二个表格链接时，之前的表格内容并没有被清除。因此，所有动态表内容都复制了相同的数据。我使用以下行来破坏表。但是得到这个错误'Uncaught TypeError: Cannot read property 'aDataSort' of undefined'

$("#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
        })
    }

Answer 1

fnDestroy() 不是官方 API。请改用$("#dataSyncTbl").dataTable().destroy(true);。

请参阅https://datatables.net/reference/api/destroy() 了解更多信息。