Question

I’m sure this is possible some how, but what I’m doing is not working.

$('#campaign_creative_performance-table #show_thumb').change(function() {
    var show = ($(this).is(':checked')) ? true : false,
        oTable = $('#campaign_creative_performance-table table.sortable').dataTable();
    oTable.fnSetColumnVis(14, show ? false : true);
    oTable.fnSetColumnVis(15, show);
});

This is supposed to hide column 14 and show column 15, and visa versa.

What it is doing is swapping the column heading and changing the width of the column but the content is not changing.

I’ve tried putting the redraw flag on the first one but there is no change.

Additional Info:
I’m getting the data via sAjaxSource and formatting it via fnRowCallback.
The format for those two columns looks like:

$('td:eq(14)', nRow).html('<p class="limit160" title="'+aData[14]+'">'+aData[14]+'</p>');
$('td:eq(15)', nRow).html('<img src="'+aData[15]+'" />');

Further Investigation
The problem is with the formatting done in fnRowCallback. Hiding column 14, makes 15 into 14 so the data is gotten from aData 14 not 15. So there needs to be some sort of test the formatter can do to find out what column it’s actually doing… or don’t use the $(‘td:eq(14)’) to determine the column. I’m just not sure how to do that.

A simplified example of it not working at is at http://jsfiddle.net/NbSCb/
Notice the data for col3 is not correct when the ‘click me’ is checked.

Answer 1

The problem was the formatting. A format decision must be decided when formatting inside the fnRowCallback. Basically if you hide column 14, column 15 becomes column 14 and takes on it’s formatting.

The solution was to use an if statement that looks at the external checkbox for it’s rule.

if($('#show_thumb').is(':checked')) {
    $('td:eq(14)', nRow).html('<img src="'+aData[15]+'" style="max-height:100px;" />');
} else {
    $('td:eq(14)', nRow).html('<p title="'+aData[14]+'">'+aData[14]+'</p>');
}

Notice that both formatting options effect row 14 but use data points 15 and 14 respectively.