How to clear all column headers using DataTables

Question

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 table.

Here are my two functions:

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

ravisolanki07 · Accepted Answer · 2013-04-30 12:10:50Z

3

You need to change on fnDrawCallback like below:

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

and Let me know !!!

answered Apr 30, 2013 at 12:10

ravisolanki07

6473 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Pink Jazz Over a year ago

Nope, it removed the column headers entirely.

Bumptious Q Bangwhistle · Accepted Answer · 2013-05-02 16:10:43Z

0

Before this line:

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

try adding

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

Since each function calls the $('#data').html(...) function, you are really replacing the entire table.

See this http://jsfiddle.net/DL6Bj/

bqb

answered May 2, 2013 at 16:10

Bumptious Q Bangwhistle

4,7692 gold badges36 silver badges46 bronze badges

Comments

fdubrez · Accepted Answer · 2013-06-10 15:06:27Z

0

Datatables doesn't seems to handle it. Apparently the bDestroy parameter is only for table data.

This worked for me:

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

answered Jun 10, 2013 at 15:06

fdubrez

1321 gold badge3 silver badges10 bronze badges

Collectives™ on Stack Overflow

How to clear all column headers using DataTables

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related