Bug in SearchPanes: Custom panes not shown if using buttons

Bug in SearchPanes: Custom panes not shown if using buttons

pgerundtpgerundt Posts: 90Questions: 13Answers: 2

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...

Replies

  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736

    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

  • pgerundtpgerundt Posts: 90Questions: 13Answers: 2
    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));
    
  • pgerundtpgerundt Posts: 90Questions: 13Answers: 2

    I'm getting closer to the bug:

        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
  • pgerundtpgerundt Posts: 90Questions: 13Answers: 2

    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)
  • sandysandy Posts: 913Questions: 0Answers: 236

    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

  • pgerundtpgerundt Posts: 90Questions: 13Answers: 2

    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

  • sandysandy Posts: 913Questions: 0Answers: 236

    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

  • pgerundtpgerundt Posts: 90Questions: 13Answers: 2

    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!

This discussion has been closed.