Adding Buttons extension to collective.js.datatables

Plone Support Add-on Development
,
1

I am trying to improve collective.js.datatables; specifically, to add support for some Datatables extensions, or "extras". For Plone 5.

I have a branch set up here:

I just pushed my attempt to configure the Buttons extension. It has:

  • browser resources configured in a separate buttons.zcml
  • resources added to the registry.xml of the plone5 profile

I explicitly add the resources to my custom view template (regular <link> and <script> tags). Then, trying to initialize the table with column visibility button with the std init code:

$(document).ready(function(){
    var oTable = $('.datatable').dataTable({
        buttons: [ 'colvis' ]
    });
})

I get:

Error: Mismatched anonymous define() module: function (d){return g(d,window,document)}
Common Errors

Digging deeper, apparently datatables js has been wrapped in some sort of redefinitions by us, to make it work with Plone5; here's what's added to the beginning of jquery.dataTables.min.js:

if (typeof old_define === 'function') {
  define = old_define;
  require = old_require;
}

And after the code, at the end this has been added:

if (typeof old_define === 'function') {
  define = old_define;
  require = old_require;
}

Is that necessary in this case, too? I tried adding those as a prefix & suffix to the button extension js files as well, and the errors went away, but I still see no button. EDIT: Forgot to explicitly add the button to the UI in the datatables initialization, using the 'dom' init parameter. With that, the button shows up. Thus:

$(document).ready(function(){
    var oTable = $('.datatable').dataTable({
    dom: 'lfrtiBp',
    buttons: [ 'colvis' ],
    });
})

Where 'B' in 'lfrtiBp' refers to the buttons extension.

One question then remains: what is still needed for the resources to be included in Plone5 js / css ('datatables'?) bundles so they don't have to be explicitly included from the view template?