3

我想知道，在使用 AJAX 更新 DataTables 时，如何删除以前 DataTable 中遗留的列标题？我在我的两个函数中都将 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);
}

我的问题截图

4

3 回答 3

3

您需要更改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);

让我知道！

于 2013-04-30T12:10:50.293 回答
0

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

这对我有用：

$('#myDataTableZone').empty();
$('#myDatatableZone').html('<table id="myDataTable"></table>');
$.getJSON('url', data, function(json) {
    $('#myDataTable'.datatable({
        "aaData": json.aaData,
        "aoColumns": json.aoColumns
    });
});
于 2013-06-10T15:06:27.050 回答
0

在此行之前：

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

尝试添加

 $('#data-entry').remove();

由于每个函数都调用 $('#data').html(...) 函数，因此您实际上是在替换整个表。

看到这个http://jsfiddle.net/DL6Bj/

烧烤

于 2013-05-02T16:10:43.710 回答