Bug in SearchPanes: Custom panes not shown if using buttons

pgerundt

Link to test case:
http://live.datatables.net/qiyevima/2/edit

Description of problem:
When using the Buttons extension via option
dom: 'Bfrtip',
the custom pane is not displayed.

When using the 'classic'
dom: 'Pfrtip',
everything is fine...

kthorngren

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

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

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

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

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

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

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

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!