SearchPane dialog with close button

imic

Thanx for great extension!
Could you please show example or direction to write code (extend SearchPane button) to include Close button under all panes!

allan

I'm not 100% sure what you mean. What will the close button do? Is it a button per pane?

Thanks,
Allan

imic

It is one button under all panes which closes SearchPanes dialog box.
For example in editor extension there is option to include custom buttons. I wonder if something similar is possible with SearchPanes extension?

$('#myTable').DataTable( {
    buttons: [
        {
            extend: 'edit',
            editor: myEditor,
            formButtons: [
                {
                    label: 'Close',
                    fn: function () { this.close(); }
                },
                'Save row'
            ]
        },
        'searchPanes', // default searchPanes dialog with no buttons
        {
            extend: 'searchPanes',
            formButtons: [ //this would be nice option to have custom buttons in searchPanes 
                {
                    label: 'Close',
                    fn: function () { this.close(); }
                }
            ]
        },
    ]
} );

allan

Thanks for the clarification - I understand now. Possibly is the answer - I'm not sure what else that feature would be used for, but we'll take a look and see if we come up with anything. Will post back when we have an answer.

Allan

allan

We've just been thinking about it a bit, and you could do something like this:

table.on('buttons-action', function (e, button) {
  $(table.searchPanes.container()).append(
    $('<button>Close</button>').click(function () {
      table.button().popover(false);
    });
  });
});

Allan

imic

Thank you. Yes, your code is what I am looking for. Used it with little modifications:

  table.on('buttons-action', function (e, button) {  
    if (!$(".dtsp-closePanes")[0]){
        $(table.searchPanes.container()).append(
            $('<button class="dtsp-closePanes">Aizvērt</button>').click(function(){
                table.button().popover(false);
            })
        );
    }    
  }); 

Maybe there is some event which can be used in this case?

imic

After some testing it appears that another IF is needed:

  table.on('buttons-action', function (e, buttonApi, dataTable, node, config ) {  
    if(config.hasOwnProperty('_panes')){
      if (!$(".dtsp-closePanes")[0]){
          $(table.searchPanes.container()).append(
              $('<button class="dtsp-closePanes">Close</button>').click(function(){
                  table.button().popover(false);
              })
          );
      }    
    }
  });  

Without additional checking multiple buttons are created.

allan

Cool - thanks for posting back with your tweaks.

Allan

mjustice

Sorry, I'm learning this as I go here - thanks to you both for figuring this out.

Does this need to be in the same script that the datatable is initialized?
Thanks!

asichi

I used this for my use case (Bootstrap 4 css).

table.on('buttons-action', function (e, buttonApi, dataTable, node, config) {
     $(table.searchPanes.container().find('.dtsp-clearAll')).after(
          $('<button class="dtsp-closePanes col-auto btn btn-light">Close</button>').click(function () {
               table.button().popover(false);
          })
     );
});

Acunn

After some testing

table.on('buttons-action', function (e, buttonApi, dataTable, node, config) {
                if (config.hasOwnProperty('_panes')) {
                    if (!$(".dtsp-closePanes")[0]) {
                        $(table.searchPanes.container().find('.dtsp-clearAll')).after(
                            $(table.searchPanes.container().find('.dtsp-clearAll')).append(
                                $('<button class="dtsp-closePanes">Close</button>').click(function () {
                                    table.button().popover(false);
                                })
                            )
                        );
                    }
                    else {
                        $('.dtsp-closePanes').click(function () {
                            table.button().popover(false);
                        })
                    }
                }
            });

It renders multiple buttons without additional control and is poorly positioned

colin

@Acunn I'm not clear if you're asking for help with the poor positioning. If so, we're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin