Data table- dynamic initialization of multiple tables

Question

In my application I am in need of constructing dynamic(both thead and tbody) data tables in modal popup. With my code I am able to create the dynamic table with materializecss. But when I click the second table link, the previous table contents are not cleared. Hence same data gets replicated for all the dynamic table contents. I used the following line to destroy the table. But getting this error 'Uncaught TypeError: Cannot read property 'aDataSort' of undefined'

$("#dataSyncTbl").dataTable().fnDestroy();

But it is not working. Here is my code.

HTML Code:

<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() is not an official API. Use $("#dataSyncTbl").dataTable().destroy(true); instead.

See https://datatables.net/reference/api/destroy() for more info.