Action/Hook/Event to tap into when SearchBuilder panel opens/closes

mattpram

I am trying to do a couple of items with the SearchBuilder extension.
1.) When user clicks on button to enable SearchBuilder, I would like to change the text on the button to say CLOSE
2.) Since the SearchBuilder panel is positioned absolutely it is overlapping the actual DataTable, so if the results are just 1 or 2 records they do not get seen until you close the panel.

So if there was an event I could tap into I could easily add/remove margin when that button is presses, and I could easily update the text of the button.

The code I have currently is

(function ($) {
    'use strict';

    $(function () {

        $('.vendor-list').DataTable({
            "order": [[0, "asc"]],
            "pageLength": 50
        });

        $('.products-list').DataTable({
            pageLength: 50,
            lengthMenu: [[5, 15, 25, 50, 100, -1], [5, 15, 25, 50, 100, 'Show all']],
            colReorder: true,
            dom: '<"#search-pane.hidden"P>' + 'Bfrtip',
            language: {
                searchBuilder: {
                    button: {
                        0: '<i class="fa fa-cog" aria-hidden="true"></i> Advanced',
                        1: '<i class="fa fa-cog" aria-hidden="true"></i> Advanced (1)',
                        _: '<i class="fa fa-cog" aria-hidden="true"></i> Advanced (%d)'
                    },
                }
            },
            buttons: [
                {
                    text: '<i class="fa fa-filter"></i> Filter',
                    className: 'filter-btn',
                    action: function (e, dt, node, config) {
                        $('#search-pane').toggle(100, function(){
                            var $filterBtn = $('.filter-btn span').html();
                            if($filterBtn === '<i class="fa fa-filter" aria-hidden="true"></i> Filter'){
                                $('.filter-btn span').html('Close');
                            } else {
                                $('.filter-btn span').html('<i class="fa fa-filter"></i> Filter');
                            }
                        });
                    }
                },
                {
                    extend: 'searchBuilder',
                    text: '<i class="fa fa-cog"></i> Advanced',
                    className: 'search-builder-btn',
                    // action: function (e, dt, node, config) {
                    //     console.log('clicked');
                    //         // var $searchBuilderBtn = $('.search-builder-btn span').html();
                    //         // if($searchBuilderBtn === '<i class="fa fa-cog" aria-hidden="true"></i> Search Builder'){
                    //         //     $('.search-builder-btn span').html('Close');
                    //         // } else {
                    //         //     $('.search-builder-btn span').html('<i class="fa fa-cog"></i> Search Builder');
                    //         // }
                    //     $.fn.dataTable.ext.buttons.searchBuilder.action.call(this, e, dt, node, config);
                    //
                    // },
                    config: {
                        depthLimit: 2
                    }
                },
                {
                    extend: 'colvis',
                    text: '<i class="fa fa-eye" title="Toggle Columns"></i> Show/Hide Columns',
                    className: 'btn btn-secondary',
                    columns: '.toggle',
                    postfixButtons: ['colvisRestore']
                },            ],

            searchPanes:{
                show: false,
                controls: false,
                cascadePanes: true,
                hideCount: false,
                layout: 'columns-6',

            },
            columnDefs: [
                {
                    targets: ['hide-column'],
                    visible: false,
                },
                {
                    searchPanes:{
                        show: true,
                    },
                    targets: ['search-pane'],
                }
            ],

        });


    });

})(jQuery);

sandy

Hi @mattpram ,

When user clicks on button to enable SearchBuilder, I would like to change the text on the button to say CLOSE

We don't currently have an easy way for you to implement this I'm afraid. It's a bit redundant as you are not able to click the SearchBuilder button once it has been pressed as the popover and it's background are displayed over it.

Since the SearchBuilder panel is positioned absolutely it is overlapping the actual DataTable, so if the results are just 1 or 2 records they do not get seen until you close the panel.

That's expected behaviour, if you don't want SearchBuilder to popover the search results then maybe you should just use it as a dom option rather than a button? Adding or removing a condition in SearchBuilder will trigger the draw as the search is applied.

Thanks,
Sandy