Again: dealing with 3rd-party JS modules in Plone 5 is a major pain

Plone Support Add-on Development
4

Hello Andreas,

You must use require to load your dependencies.

basically something like this should work:

require([
    'jQuery',
    './++resource++zopyx.plone.persistentlogger/DataTables/media/js/jquery.dataTables.js',
    './++resource++zopyx.plone.persistentlogger/DataTables/extensions/FixedHeader/js/dataTables.fixedHeader.min.js',
    './++resource++zopyx.plone.persistentlogger/DataTables/extensions/TableTools/js/dataTables.tableTools.min.js'
], function($, dt, plugin1, plugin2) {
     // your code here
     $.DataTable(blablabla);
});

require can load pre-declared resources (like jQuery in this example, which is declared by the Plone JS bundle, and we could have add pat-tinymce or anything else from Mockup) or resources specified by their URL (you might use CDN urls by the way if you do not want to host Datatables and its plugins in your site), and those resources are passed as parameters to a callback function able to use them, here I just use $, the 3 others (dt, plugin1, plugin2) are not useful as they are used through jquery, and they could be removed from your callback:

], function($) {
         // your code here
         $.DataTable(blablabla);
 });
4 Likes