heading and data column widths differ

scottso

I've a datatable that gets server side data via POST from a servlet returning json aaData. The data has 53 columns. When the table first displays, it has all the data. I then hide all but the default columns. Everything displays fine. When the user (me right now) selects a different set of columns to display (from a selection list in a hidden div), the headings and data display, but with different widths. For example, but I'm not explicitly stetting column widths, heading = 50px and data = 30px. If I click on one of the headings, sorting the data, the columns align. I'm pretty sure I might be missing a refresh call, but have hit a wall.

The document ready function:
[code]
$.extend($.fn.dataTable.defaults, {
"bSort": true,
"sScrollY": 550,
"sScrollX": "100%",
"bScrollCollapse": true,
"bProcessing": true,
"bPaginate": false,
"bInfo": false,
"bFilter": false,
"bServerSide": true,
"sServerMethod": 'POST',
"sAjaxSource": 'GetJSONViewColumnValues?whatToGet=data',
"fnInitComplete": function () {
$("#tableData tr").contextMenu({
menu : 'tableMenu'
},
function(action, el, pos) {
contextMenuCb(action, el, pos);
});
}
});

$("#tableData").dataTable();

$(window).load(getColumns());
[/code]


getColumns():
[code]
$.post("GetJSONViewColumnValues?whatToGet=columns", function(data) {
var numCols = data.numCols; // num of cols returned by servlet's json


// try setting some/all of this with default fn
// some table config
data.bDestroy = true;
data.bAutoWidth = true;

// apply to the table
$("#tableData").dataTable(data);

// show the default column(s)
hideShowColumns(numCols);
}, "json");
[/code]


hideShowColumns():
[code]
var oTable = $("#tableData").dataTable(); // data tables object
var selectedVals = $("#currentView").val(); // values in selection list

// hide all columns
if (numCols > 0) {
for (var i = 0; i < numCols; i++) {
oTable.fnSetColumnVis(i, false);
}
}

// show column(s)
$.each(selectedVals, function(index, value) {
// remove leading zero-padding of two-digit value
var unpadded = value.replace(/^0/g,"");

oTable.fnSetColumnVis(unpadded, true);
});

// calculate column widths needed based on current data and redraw table
oTable.fnAdjustColumnSizing();
[/code]