Javascript 如何使用DataTables清除所有列标题

我想知道，在使用AJAX更新数据表时，如何删除前一个数据表中留下的列标题？我在两个函数中都将bDestroy设置为true以绘制表，但是，其中一个表的列数比另一个表的列数少，并且在加载较大的表后加载较小的表时，会从较大的表中获取剩余的列标题

以下是我的两项职能：

function combinedAgeGender() {
(function($) {
    $('#data').html('<table width="100%" cellspacing="3" cellpadding="0" id="data-entry"></table>');
    $('#data-entry').dataTable({
        "bProcessing": true,
        "bScrollInfinite": true,
        "bScrollCollapse": true ,
        "bAutoWidth": false,    
        "iDisplayLength": -1,
        "bDestroy": true,
        "sDom": '<"top">rt<"bottom">',
        "aaSorting": [],
        "sAjaxSource": "/CensusDatabase/database_scripts/CombinedAgeGender.php",
        "aoColumns": [
            { "sTitle": "Age group" },
            { "sTitle": "National total population (both genders)" },
            { "sTitle": "National male population" },
            { "sTitle": "National female population" },
            { "sTitle": "National % (both genders)" },
            { "sTitle": "National male %" },
            { "sTitle": "National female %" },
            { "sTitle": "National males per 100 females" },
            { "sTitle": "Arizona total population (both genders)" },
            { "sTitle": "Arizona male population" },
            { "sTitle": "Arizona female population" },
            { "sTitle": "Arizona % (both genders)" },
            { "sTitle": "Arizona male %" },
            { "sTitle": "Arizona female %" },
            { "sTitle": "Arizona males per 100 females" }

        ]

    });
})(jQuery);
}

function nationalAgeGender() {
(function($) {
    $('#data').html('<table width="100%" cellspacing="3" cellpadding="0" id="data-entry"></table>');
    $('#data-entry').dataTable({
        "bProcessing": true,
        "bScrollInfinite": true,
        "bScrollCollapse": true ,
        "bAutoWidth": false,
        "bDestroy": true,   
        "iDisplayLength": -1,   
        "sDom": '<"top">rt<"bottom">',
        "aaSorting": [],
        "sAjaxSource": "/CensusDatabase/database_scripts/NationalAgeGender.php",
        "aoColumns": [
            { "sTitle": "Age group" },
            { "sTitle": "Total population (both genders)" },
            { "sTitle": "Male population" },
            { "sTitle": "Female population" },
            { "sTitle": "% (both genders)" },
            { "sTitle": "Male %" },
            { "sTitle": "Female %" },
            { "sTitle": "Males per 100 females" }
        ]

    });
})(jQuery);
}

函数combinedAgeGender（）{
（函数（$）{
$（'#data'）.html（''）；
$（'#数据输入'）。数据表({
“bProcessing”：正确，
“无限”：对，
“崩溃”：没错，
“bAutoWidth”：假，
“iDisplayLength”：-1，
是的，
“sDom”：“rt”，
“aaSorting”：[]，
“sAjaxSource”：“/CensusDatabase/database_scripts/CombinedAgeGender.php”，
“aoColumns”：[
{“缝合”：“年龄组”}，
{“sTitle”：“全国总人口（男女）”，
{“sTitle”：“全国男性人口”}，
{“sTitle”：“全国女性人口”}，
{“sTitle”：“国民%（男女）”}，
{“sTitle”：“全国男性%”}，
{“sTitle”：“全国女性%”}，
{“sTitle”：“全国每100名女性的男性人数”}，
{“sTitle”：“亚利桑那州总人口（男女）”}，
{“sTitle”：“亚利桑那州男性人口”}，
{“sTitle”：“亚利桑那州女性人口”}，
{“sTitle”：“亚利桑那州%（男女）”}，
{“sTitle”：“亚利桑那州男性%”}，
{“sTitle”：“亚利桑那州女性%”}，
{“sTitle”：“亚利桑那州每100名女性的男性人数”}
]
});
})（jQuery）；
}
函数nationalegender（）{
（函数（$）{
$（'#data'）.html（''）；
$（'#数据输入'）。数据表({
“bProcessing”：正确，
“无限”：对，
“崩溃”：没错，
“bAutoWidth”：假，
是的，
“iDisplayLength”：-1，
“sDom”：“rt”，
“aaSorting”：[]，
“sAjaxSource”：“/CensusDatabase/database_scripts/NationalAgeGender.php”，
“aoColumns”：[
{“缝合”：“年龄组”}，
{“sTitle”：“总人口（男女）”}，
{“sTitle”：“男性人口”}，
{“sTitle”：“女性人口”}，
{“针”：“%（男女）”}，
{“针”：“男性%”}，
{“针”：“女性%”}，
{“针”：“每100名女性中的男性”}
]
});
})（jQuery）；
}

---

您需要在

fnDrawCallback

上进行更改，如下所示：

(function($) {
$('#data').html('<table width="100%" cellspacing="3" cellpadding="0" id="data-entry"></table>');
$('#data-entry').dataTable({
    "bProcessing": true,
    "bScrollInfinite": true,
    "bScrollCollapse": true ,
    "bAutoWidth": false,
    "bDestroy": true,   
    "iDisplayLength": -1,   
    "sDom": '<"top">rt<"bottom">',
    "aaSorting": [],
    "sAjaxSource": "/CensusDatabase/database_scripts/NationalAgeGender.php",
    "aoColumns": [
        { "sTitle": "Age group" },
        { "sTitle": "Total population (both genders)" },
        { "sTitle": "Male population" },
        { "sTitle": "Female population" },
        { "sTitle": "% (both genders)" },
        { "sTitle": "Male %" },
        { "sTitle": "Female %" },
        { "sTitle": "Males per 100 females" }
    ],
    "fnDrawCallback": function () {
         $('#data-entry thead').html('');            
     }

});
})(jQuery);

（函数（$）{
$（'#data'）.html（''）；
$（'#数据输入'）。数据表({
“bProcessing”：正确，
“无限”：对，
“崩溃”：没错，
“bAutoWidth”：假，
是的，
“iDisplayLength”：-1，
“sDom”：“rt”，
“aaSorting”：[]，
“sAjaxSource”：“/CensusDatabase/database_scripts/NationalAgeGender.php”，
“aoColumns”：[
{“缝合”：“年龄组”}，
{“sTitle”：“总人口（男女）”}，
{“sTitle”：“男性人口”}，
{“sTitle”：“女性人口”}，
{“针”：“%（男女）”}，
{“针”：“男性%”}，
{“针”：“女性%”}，
{“针”：“每100名女性中的男性”}
],
“fnDrawCallback”：函数（）{
$（'#数据输入thead'）.html（''）；
}
});
})（jQuery）；

让我知道

在这一行之前：

$('#data').html('<table width="100%" cellspacing="3" cellpadding="0" id="data-entry"></table>');

由于每个函数都调用$（'#data'）.html（…）函数，因此实际上是在替换整个表

看到这个了吗

---

bqb

数据表似乎无法处理它。显然，bDestroy参数仅用于表数据

这对我很有用：

$('#myDataTableZone').empty();
$('#myDatatableZone').html('<table id="myDataTable"></table>');
$.getJSON('url', data, function(json) {
    $('#myDataTable'.datatable({
        "aaData": json.aaData,
        "aoColumns": json.aoColumns
    });
});

$（'#myDataTableZone'）.empty（）；
$（'#myDatatableZone'）.html（''）；
$.getJSON（'url'，数据，函数（json）{
$（'#myDataTable'.datatable({
“aaData”：json.aaData，
“aoColumns”：json.aoColumns
});
});

no，它完全删除了列标题。

$('#myDataTableZone').empty();
$('#myDatatableZone').html('<table id="myDataTable"></table>');
$.getJSON('url', data, function(json) {
    $('#myDataTable'.datatable({
        "aaData": json.aaData,
        "aoColumns": json.aoColumns
    });
});