DataTable: проблемы с удалением дочерних элементов при перезагрузке.

Question

Я создал HighChart и соответствующий DataTable, который можно увидеть здесь . Я пытаюсь заставить DataTable измениться, когда пользователь углубится во второй график, «2018-19 Общее количество рефералов по области достижений». Это почти работает, за исключением того, что по какой-то причине оригинальный заголовок не удаляется. Есть трюк, который я пропускаю?

<div class="container">
<div class="row mt-3" style="background-color: aliceblue">
    <div class="mx-auto my-3">
        <table id="tblReferrals" class="table table-striped table-bordered" style="font-size: x-small">
            <thead style="background-color: antiquewhite">
            </thead>
            <tbody style="font-size: small"></tbody>
        </table>
    </div>
</div>

Функция для очистки DataTable и перезагрузки:

    function loadTableDetail() {
    $('#tblReferrals thead').empty();
    $('#tblReferrals tbody').empty();

    return $.ajax({
        type: "POST",
        contentType: "application/json; charset=UTF-8",
        url: "WebServices/districtDatacard.asmx/getReferrals_tableDetail",
        data: JSON.stringify({ areaIDs: strAreaIDs, schoolTypes: strSchoolTypes, raceIDs: strRaceIDs, genderIDs: strGenderIDs, demographics: strDemographics }),
        dataType: "json",
        cache: false,
        success: function (response) {
            var initialLoad = true;
            var refTab = response.d;

            if (initialLoad) {
                var tr = document.createElement("tr");
                $('#tblReferrals thead').append(tr);

                $.each(refTab[0], function (index, element) {
                    if ((element.colName != 'aaSeq') && (element.colName != 'cyTrend')) {
                        var th = document.createElement("th");

                        th.innerHTML = element.colName;
                        tr.appendChild(th);
                    }
                });
            };

            $.each(refTab, function (index, element) {
                var tr = document.createElement("tr");
                $('#tblReferrals tbody').append(tr);

                $.each(element, function (idx, elem) {
                    if ((elem.colName != 'aaSeq') && (elem.colName != 'cyTrend')) {
                        var td = document.createElement("td");

                        tr.appendChild(td);

                        if ((elem.colName == "Prior Year") || (elem.colName == "Current Year")) {
                            $(td).addClass("text-center");
                            td.innerHTML = formatNumberWithCommas(elem.colVal);
                        }
                        else
                            td.innerHTML = elem.colVal;

                        if (elem.colName == "Current Year") {
                            $(td).addClass("text-strong");
                            $(td).css("color", element[idx + 1].colVal);
                        }
                    }
                })
            })

            $('#tblReferrals').dataTable({
                retrieve: true, 
            })
        }
    })
}

Answer 1

Я уверен, что есть много способов исправить это, но вот что сработало для меня: мне пришлось уничтожить DataTable перед удалением строк thead.

var tbl = $('#tblReferrals').DataTable();
tbl.destroy();

$('#tblReferrals thead').empty();
$('#tblReferrals tbody').empty();

Затем я просто приступил к воссозданию таблицыи все хорошо.