Как очистить все заголовки столбцов с помощью DataTables

Question

Мне было интересно, как обновить DataTables с помощью AJAX, как удалить заголовки столбцов, оставшиеся от предыдущего 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); 
} 

Answer 1

Вам нужно изменить на 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); 

и дайте мне знать !!!

Answer 2

До этой линии:.

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

функции

попробуйте добавить

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

Поскольку каждая функция вызывает $ ('# данных') HTML (...), вы действительно заменяя весь стол.

Смотреть эту http://jsfiddle.net/DL6Bj/

BQB

Answer 3

DataTables не кажется, чтобы справиться с этим. По-видимому, параметр bDestroy предназначен только для данных таблицы.

Это работает для меня:

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