Hiding and unHiding of columns

bumblebee

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.

allan

Why use both the old API ( fnFilter ) and the new one (columns().visible())? Just use one - it will be must simpler (search() is the API for searching the table)!

Responsive controls the column visibility itself, so you do not want to use the columns().visible() method with Responsive - it will give unpredictable results.

Currently, what you need to do, is add and remove the class never to the column headers that you want to show / hide: $(table.columns( [2,3] ).node()).addClass('never'). Then use the responsive.rebuild() method to recalculate Responsive's class logic.

The other thing is, try using the 1.10.8-dev nightly. Finally, if it still doesn't work, please post a link to a test case (as per the forum rules :-) ).

Allan

bumblebee

Thanks Allan, I will try this.

bumblebee

Hi Allan,

I used the following as a click event on the html button page else where which tries to hide and another event to show based on what the user clicks.

Here is the code I used on the button

 $(pTable.columns( [1,2,3,4] ).header() ).addClass( 'never' );
 pTable.columns.adjust();
 pTable.responsive.rebuild();
 pTable.responsive.recalc();

it does hide, but immediately throws an error
TypeError: Cannot read property 'style' of undefined

bumblebee

I will go this route http://datatables.net/forums/discussion/9517/redraw-datatable-with-new-column-set-and-server-side-data

allan

Can you give me a link to the page please? The code you have above should work (assuming you are using the 1.10.8-dev nightly and not 1.10.7 which has a bug that might cause this issue).

Allan

bumblebee

Hi Alan,

The page is still not on production so I am not able to give you a link. I see that I am using 1.10.7. Is there a way I can check the version other than what the folder name says.

allan

The DataTables debugger will give you version information.

Allan

bumblebee

Hi Allan,

I ran the debugger and it does confirm it is
DataTables 1.10.7 Up-to-date
Responsive 1.0.6 Up-to-date
Thanks