Question

我创建了一个HighChart和相应的DataTable，可以看到here。我正在尝试让数据表在用户向下钻取第二个图表“ 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>

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

    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

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

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

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

然后我只是简单地重新创建表，一切都很好。

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

1 个答案: