Display of DataTable after resize of containing div

Rick

Hi All,

I have a dataTable that displays with a width of 100% when the page first loads. This works fine.

A user interaction (toggle) allows the display to 'split' so that the table is displayed on the left of the page at a width of 50% and a chart on the right. When this is done two columns of the table are made invisible. This works fine too.

The issue I'm having is when the user toggles the display back so the chart is hidden and the table is displayed with a width of 100%. What happens is the wrapper div is adjusted to display at 100% but the table itself is centered within the div but it is not resized and empty space is left on the left and right of the table.

oTable.fnAdjustColumnSizing() does not help.

Here's the code I'm using to toggle the display:
[code]
showCharts: function() {
$('#table').css('width','50%');
$('#chart').show();
oMainTable.fnSetColumnVis(5, false);
oMainTable.fnSetColumnVis(6, false);
},
hideCharts: function() {
oMainTable.fnSetColumnVis(5, true);
oMainTable.fnSetColumnVis(6, true);
$('#chart').hide();
$('#table').css('width','100%');
// oMainTable.fnAdjustColumnSizing(true);
}

[/code]

What is the best way to do this?

Your help is very much appreciated.

Rick