Toggle/Hide searchPanes panels

demetriol

Hi,
I added searchPanes extension to my datatable,

searchPanes : { layout: 'columns-2', columns : [ 1, 2 ] },

Also I added a custom button to hide/show the searchPanes div, identified by class

buttons: [ { text: ' Advanced filters', className: 'cmdbbuttonscustom fa fa-filter', attr: {'data-toggle': 'collapse', 'data-target': '.dtsp-panesContainer'}},

I would like to initialize the datatable with the searchPane div hidden, for example by adding this code

$('.dtsp-panesContainer').collapse('hide');

I don't know where i can executed the last line of code, in "initComplete" callback doesn't work because the div is not drawn yet.

Is there an alternative way to do the job?

Thank you

kthorngren

I use the following inside `-option initComplete to initially hide the searchPanes:

            table.searchPanes.container().prependTo(table.table().container());
            table.searchPanes.container().hide();

I use the first line in place of the P in the dom option. I suspect that you can continue to use the dom option with P and only need the second line. See the searchPanes.container() docs for more info.

Kevin

sandy

Hi @demetriol ,

You could also use the predefined button for SearchPanes, it might do the hard work for you?

Thanks,
Sandy

demetriol

Hi @kthorngren,
I solved using your code table.searchPanes.container().hide();, also I added table.searchPanes.container().toggle(); in the action of the botton, in order to show/hide the searchPanes elements. It works very well, but it doesn't have the bootstrap transition effect of 'collapse', but it isn't a problem, thank you!

demetriol

Hi @sandy ,
I tried to use the predefined button, but I have some issues when the modal is shown:

• Elements are not selectable (when I click on it, nothing happens)
• Sometimes some column filter doesn't appears, the behavior is non-deterministic, so I think there is an incompatibility with the other elements in my page.

I follwed the suggest of @kthorngren and I solved. Thank you so much!