如何使用DataTable清除所有列標題

我想知道，在使用AJAX更新DataTable時，如何刪除先前DataTable中剩下的列標題？我的bDestroy在我的兩個函數中設置爲true來繪製表格，但是，其中一個表格的列數比另一個少，當加載較大的表格時，我會從較大的表格中獲取剩餘的列標題。如何使用DataTable清除所有列標題

這裏是我的兩個功能：

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

Screenshot of my issue

來源

2013-04-30 Pink Jazz

您需要更改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-30 12:10:50 ravisolanki07

不，它去掉了列標題完全。 – 2013-04-30 15:56:58

這一行之前：

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

嘗試添加

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

由於每個函數調用$（ '＃數據'）HTML（...）函數，你真的更換整個桌子。

看到這個http://jsfiddle.net/DL6Bj/

BQB

來源

2013-05-02 16:10:43

數據表似乎並不處理它。顯然，bDestroy參數只適用於表格數據。

這爲我工作：

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

來源

2013-06-10 15:06:27 fdubrez

如何使用DataTable清除所有列標題

回答

相關問題