[英]How to clear all column headers using DataTables
我想知道,當使用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);
}
您需要像下面這樣更改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('<table width="100%" cellspacing="3" cellpadding="0" id="data-entry"></table>');
嘗試添加
$('#data-entry').remove();
由於每個函數都調用$('#data')。html(...)函數,因此您實際上是在替換整個表。
看到這個http://jsfiddle.net/DL6Bj/
BQB
數據表似乎無法處理它。 顯然,bDestroy參數僅用於表數據。
這為我工作:
$('#myDataTableZone').empty();
$('#myDatatableZone').html('<table id="myDataTable"></table>');
$.getJSON('url', data, function(json) {
$('#myDataTable'.datatable({
"aaData": json.aaData,
"aoColumns": json.aoColumns
});
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.