DropDownList display different DataTables upon selection has messed up header and old data in it.

iDataTables

Great and best data table plugin for jQuery I must say.

I have a dropdownlist. When a user select a value from the drop down, a datatables appears. I can only get the first table to appear right, the subsequent selection from the drop down will have the order of the header and value all messed up. Some header titles from the previous datatables are still on the new datatables header. Please help

My code.

[code]
$(document).ready(function () {
//$('#compTable').remove(); //tried this but nothing loads.
$('.ddlCom').change(function () {

var comID = $(this).val();
$.ajax({
"url": 'CompTableJson.ashx?comID=' + comID,
"dataType": "json",
"success": function (json) {
$('#compTable').dataTable({
"aaData": json.aaData,
"aoColumns": json.aoColumns,
"aaSorting": [[0, "desc"]],
"bJQueryUI": true,
"bScrollInfinite": true,
"bScrollCollapse": true,
"bDestroy": true,
"bDeferRender": true,
"iDisplayLength": 100,
"sScrollY": "1000px"
});
}

});
});

});

[/code]

iDataTables

never mind i figured it out. Not only I had to destroy the table but also clear out all the HTML.