Hiding and unHiding of columns

I am trying to hide a column when user clicks a button and unhide them again based on what the user clicks. I also do a filter

This is the code for hiding

var oTable = $('#example').DataTable();                         
oTable.columns( [2, 3] ).visible( false );                  
var otable = $('#example').dataTable();
 otable.fnFilter( search);

The above code works to hide the column and filters

Now I want to unhide the column

var otable = $('#example').dataTable();
otable.fnFilter( '');
var oTable = $('#example').DataTable();
oTable.columns( [2, 3] ).visible( true );

It un-hides the 2nd column but not the third and then the table is messed up because and further hiding/unhiding does not work and gives an error in the console as 'style' not found because of the mismatch in the columns now. I am using a responsive plugin.