时间戳

首页 > 解决方案 > DataTable 问题在重新加载时删除 thead 子项

jquery - DataTable 问题在重新加载时删除 thead 子项

问题描述

我创建了一个 HighChart 和相应的 DataTable，可以在这里看到。当用户深入到第二个图表“2018-19 Total # of Referrals by Achievement Area”时，我试图让 DataTable 发生变化。它几乎可以工作，除了由于某种原因原始标题没有被删除。有没有我错过的技巧？

<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>

清除数据表并重新加载的函数：

    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, 
            })
        }
    })
}

标签： jquerydatatables

解决方案

我确信有很多方法可以纠正这个问题，但这对我有用：我必须在删除 thead 行之前销毁 DataTable。

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

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

然后我只是继续重新创建表，一切都很好。

推荐阅读