How to clear excess column headers from a previously loaded DataTable
How to clear excess column headers from a previously loaded DataTable
I was wondering, when updating DataTables using AJAX, how do you delete column headers left over from a previous DataTable? I have bDestroy set to true in both of my functions to draw the table, however, one of the tables has fewer columns than the other, and when loading the smaller table after loading the larger one, I get leftover column headers from the larger
[code]function nationalAgeGender() {
(function($) {
$('#data-entry').remove();
$('#data').html('');
$('#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);
}
function combinedAgeGender() {
(function($) {
$('#data').html('');
$('#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);
}
[/code]
Here is a screenshot of the problem:
http://i.stack.imgur.com/2bqd0.png
[code]function nationalAgeGender() {
(function($) {
$('#data-entry').remove();
$('#data').html('');
$('#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);
}
function combinedAgeGender() {
(function($) {
$('#data').html('');
$('#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);
}
[/code]
Here is a screenshot of the problem:
http://i.stack.imgur.com/2bqd0.png
This discussion has been closed.
Replies