Replies

• kthorngren Posts: 20,425Questions: 26Answers: 4,794

  May 2021

  Looks like you are missing buttons.bootstrap4.min.css, for example:

  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.7.0/css/buttons.bootstrap4.min.css"/>
  

  See this updated example:
  http://live.datatables.net/qiyevima/3/edit

  Kevin
• pgerundt Posts: 90Questions: 13Answers: 2

  May 2021 edited May 2021

  Hi Kevin,

  nope, that doesn't make get custom pane "Age Range" to show up.

  I'm still searching in the code for the cause but it looks like that
  - when initialized with the "dom" option including "P", the custom panes are stored in this.customPaneSettings
  - but when initialized with the "dom" option having "B" instead, $.fn.dataTable.ext.buttons.searchPanes.actionor $.fn.dataTable.ext.buttons.searchPanes.initdoes not call _paneDeclare()

  My guess is there's something wrong around lines 2793+:

  var panes = new $.fn.dataTable.SearchPanes(dt, $.extend({
    filterChanged: function (count) {
      dt.button(node).text(dt.i18n('searchPanes.collapse', panes.c.i18n.collapse, count));
    }
  }, config.config));
  
• pgerundt Posts: 90Questions: 13Answers: 2

  May 2021

  I'm getting closer to the bug:

  • Set a custom pane as shown in the example http://live.datatables.net/qiyevima/3/edit
  • Add a debug message to the SearchPanes constructor (line 1580):

      var SearchPanes = /** @class */ (function () {
          function SearchPanes(paneSettings, opts, fromInit) {
  console.log(opts);
  ...
  

  • Run with domoption having P: optsis set
  • Run with domoption having B instead of P: opts is undefined
• pgerundt Posts: 90Questions: 13Answers: 2

  May 2021

  Maybe that helps:

  lines 2815+:

  // Attach a listener to the document which listens for DataTables initialisation
  // events so we can automatically initialise
  $(document).on('preInit.dt.dtsp', function (e, settings, json) {
    if (e.namespace !== 'dt') {
      return;
    }
    if (settings.oInit.searchPanes ||
     DataTable.defaults.searchPanes) {
  console.log(settings._searchPanes.s.panes);
     if (!settings._searchPanes) {
       _init(settings, null, true);
     }
   }
  });
  

  • Using P in dom option: settings._searchPanes.s.panes only contains 'generic' panes, no custom pane(s)
  • Using Bin dom option: settings._searchPanes.s.panes contains 'generic' panes PLUS custom pane(s)
• sandy Posts: 913Questions: 0Answers: 236

  May 2021

  Hi @pgerundt ,

  Thanks for pointing this out. I'm in the middle of exam season at the moment, but will take a look on Friday when I am next working. Hopefully I can get a fix sorted then.

  Thanks,
  Sandy
• pgerundt Posts: 90Questions: 13Answers: 2

  May 2021

  Dear Sandy,

  thank you very much and good luck with your exams, I'll keep my fingers crossed.
  If you can take a look on Friday on this new problem here:
  http://live.datatables.net/qiyevima/5/edit
  The option cascadePanes is also not working when using B in the dom option.
  But I guess the problem is totally related.

  Thanks,
  Pascal
• sandy Posts: 913Questions: 0Answers: 236

  May 2021

  Hi @pgerundt ,

  I think this will solve both of your issues...

  When configuring SearchPanes within a button you need to set the configuration in the buttons config object rather than the generic SearchPanes object. See your updated example here.

  Thanks,
  Sandy
• pgerundt Posts: 90Questions: 13Answers: 2

  May 2021

  Hi Sandy,
  thank you very much. The JS object trees are sometimes a little bit confusing.
  After some sleepless nights, I got everything up and running...

  Thank you!