Phantom Columns showing up in a dynamic solution

JeffHoeft

Hi All,

I am new to Data Tables but i am excited with what i have been able to accomplish so far.

I am having trouble with my dynamic solution using Ajax. The code works beautifully functionally, but cosmetically it has a problem.
It brings back the first table perfectly, however, if the second time the call is made and the table has less columns then the previous table it shows extra phantom table columns. if the table has more columns then it just does not show the headers for the columns that exceed the original number of columns.

any suggestions? I have tried to use the fnClearTable but it causes a weird sorting error.

Here is the important part of my code:

[code]
function loadTable(obj) {
var url = '';
if(obj.selectedIndex == 0)
{
$('#noTableSelected').show();
}
else
{
$.getJSON(url, {"selectedTable":obj.value}, function(resp, args) {
var oheaders = $(resp.result).attr("aoColumns");
var odata = $(resp.result).attr("aaData");
$('#rateFactorsTable').dataTable({"bDestroy": true,"aoColumns": oheaders,"aaData": odata,"bJQueryUI": true});
});
}
}

[/code]

here is what my arrays look like

[code]
oheaders = [{ sTitle="STATE_ABBR"},{ sTitle="ZIP_START"},{ sTitle="ZIP_END"},{ sTitle="PLAN_TYPE"},{ sTitle="PLAN_ID"},{ sTitle="FACTOR"}]

odata = {["CA", "95900", "96199", "HMO", "HMO Low", "165.0"],
["CA", "95900", "96199", "HMO","HMO Gold Benefit Choice", "230.0"],
["CA", "95600", "95899", "HMO", "HMO Low", "139.0"]};
[/code]