Bug in SearchPanes: Custom panes not shown if using buttons

Bug in SearchPanes: Custom panes not shown if using buttons

pgerundtpgerundt Posts: 28Questions: 5Answers: 0

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: 13,788Questions: 25Answers: 3,243

    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: 28Questions: 5Answers: 0
    edited May 3

    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: 28Questions: 5Answers: 0

    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: 28Questions: 5Answers: 0

    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: 686Questions: 0Answers: 188

    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: 28Questions: 5Answers: 0

    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: 686Questions: 0Answers: 188

    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: 28Questions: 5Answers: 0

    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!

Sign In or Register to comment.