Hiding Columns Using 'visible: false' Is Disabling Filters

BrianA12 · October 2020

Hi,

Please find a test case here: http://live.datatables.net/ruhixelu/5/edit?html,css,js,console,output

The attached test case is a very simplified version of my project, just to show what my problem is.

My datatable has a filter in each column (some are text inputs , some select menus, some date inputs, etc.) I have also added text boxes/toggle buttons to toggle - hide/show columns (Name and Position in the test case). Recently, I needed some of my columns (column 0 - Name and column 1 - Position) to be hidden by default, so I did the following:

"columnDefs": [ 
        {
            "targets": [0,1],
            "visible": false,
        },
                    
  ],

The problem is that when toggling the checkboxes to show the columns (columns 0 and 1 - Name and Position), the filter input is not shown.

How can I fix this problem please? Obviously, I need the filters for both the Name and the Position to appear in the header when these two columns are toggled/shown.

Thanks in advance for your help,

Brian

kthorngren · October 2020

There are lots of threads asking about column search filters and toggling column visibility. See of one of these helps your solution:
https://datatables.net/forums/discussion/comment/167556/#Comment_167556
https://datatables.net/forums/discussion/comment/176163/#Comment_176163
https://datatables.net/forums/discussion/comment/165817/#Comment_165817

Kevin

BrianA12 · October 2020

@kthorngren

Please note that before using the visible option to hide the columns by default, the show/hide columns feature was working well.

The issue occurs only when hiding the columns by default using the visible option.

Could you kindly check my test case code?

Thanks a lot,
Brian

colin · October 2020

Yep, as Kevin said those threads should get you going. The problem is this line:

if ($('#example thead tr:eq(1) th:eq(' + column.index() + ')').hasClass('text-search')) {

That's checking the DOM for the class - but those columns aren't in the DOM. You'll need to change your logic to use the DataTables API (as those threads point you towards).

Colin

BrianA12 · October 2020

@colin @kthorngren

Hi, after reviewing the examples you provided and spending quite some time try different approaches, I still can't get it to work.

Please find my updates test case here: http://live.datatables.net/woravidi/1/edit?html,css,js,console,output

In the example above the filters are no longer present in the columns.

Also please note that i would not like to use colvis, but 'custom' tickboxes above the table, as shown.

Thanks

BrianA12 · October 2020

I have updated the test case as:

I had a mistake in the columns indices
Now filters are visible by changing the following:

.appendTo( $("thead tr:eq(1) td").eq(column.index()).empty() )

to

.appendTo( $('thead tr:eq(1) th:eq(' + column.index() + ')').empty() )

Thanks again

Hiding Columns Using 'visible: false' Is Disabling Filters

Hiding Columns Using 'visible: false' Is Disabling Filters

Replies