How Do I Increase Table Width When Dynamically "Showing" Hidden Columns

tcbeaton

I have a table with many columns, some of which are hidden by default. The hidden columns are optionally shown by checking a check box in the row header for the parent data field. The show/hide function, shown below, is working correctly, but when additional columns are made visible the width of the table is not increased, instead the existing columns are all made narrower.

Is it possible for the entire width of the table to increase when showing hidden columns (or decrease when hiding shown columns) vs. rescale the column widths?

Here is the table set-up:
[code]
var oTable = $('#example').dataTable( {
"sDom": 'Rlfrtip',
"bPaginate":false,
"bInfo":false,
"sScrollY":"600",
"sScrollX":"100%",
"bScrollCollapse":true,
"bAutoWidth":false,
[/code]

And here is the show/hide function:
[code]
function showHide (self,col,cnt) {
var bVis;
var oTable = $('#example').dataTable();
for (j=1;j<=cnt;j++) {
bVis = oTable.fnSettings().aoColumns[col + j].bVisible;
oTable.fnSetColumnVis ((col + j),self.checked);
}
oTable.fnDraw();
}
[/code]

tcbeaton

(this comment deleted)

robertbrower

Use the fnAdjustColumnSizing API method.

Instead of:

oTable.fnDraw();

Use:

oTable.fnAdjustColumnSizing(true);

tcbeaton

Thanks Robert, this appears to have worked. Sorry for the delay in posting this reply, just thinking I hadn't responded.