Replies

• allan Posts: 61,972Questions: 1Answers: 10,160 Site admin

  February 2020

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

  Thanks,
  Allan
• imic Posts: 6Questions: 0Answers: 0

  February 2020 edited February 2020

  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 Posts: 61,972Questions: 1Answers: 10,160 Site admin

  February 2020

  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 Posts: 61,972Questions: 1Answers: 10,160 Site admin

  February 2020

  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 Posts: 6Questions: 0Answers: 0

  February 2020

  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 Posts: 6Questions: 0Answers: 0

  February 2020

  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 Posts: 61,972Questions: 1Answers: 10,160 Site admin

  February 2020

  Cool - thanks for posting back with your tweaks.

  Allan
• mjustice Posts: 1Questions: 0Answers: 0

  February 2021

  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 Posts: 1Questions: 0Answers: 0

  March 2021

  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 Posts: 1Questions: 0Answers: 0

  October 2021

  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 Posts: 15,177Questions: 1Answers: 2,590

  October 2021

  @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