Loading DataTables as a RequireJS/AMD module (2016 update)

hheimbuerger

I'm trying to use the latest DataTables (1.10.12 at the time of writing) with the Bootstrap styling and the Buttons extensions as an AMD/RequireJS module. Is there some updated post/guide for that?

I've found a lot of discussions, but this seems to have changed quite a bit over time and it's rather hard to discern what is still relevant and what information is outdated.

From what I read, until some version number (I believe 1.10.10) DT exported a named module: datatables. I think this changed then, but I've still seen the name (?) datatables.net being mentioned. And also the modules datatables.net-bs and datatables.net-buttons. Are these still named modules?

There was some discussion about whether the bundles option in the latest RequireJS could be used to load them from the concatenated file. Has someone succeeded in doing this?

Is there an example configuration somewhere I can start from? Thanks!

hheimbuerger

I'm trying to load the individual files now. I've narrowed my case down to needing the following files:

jquery.dataTables.js (named module `datatables.net`?)
dataTables.bootstrap.js (named module `datatables.net-bs`?)
dataTables.buttons.js (named module `datatables.net-buttons`?)
dataTables.responsive.js (named module `datatables.net-responsive`?)
buttons.bootstrap.js
buttons.html5.js
buttons.print.js
jszip.js
pdfmake.js
responsive.bootstrap.js
vfs_fonts.js

For the named modules, I've added paths rules (my files are to be found in libs/datatables/), and then I tried to load them in the order displayed on the DT download/builder page:

define(['jquery',
        'bootstrap',
        'libs/datatables/jszip',
        'libs/datatables/pdfmake',
        'libs/datatables/vfs_fonts',
        'datatables.net',
        'datatables.net-bs',
        'datatables.net-buttons',
        'libs/datatables/buttons.bootstrap',
        'libs/datatables/buttons.html5',
        'libs/datatables/buttons.print',
        'datatables.net-responsive',
        'libs/datatables/responsive.bootstrap'],

That almost works! PDF exports successfully, just the 'Excel' button doesn't show up.

I'm configuring my data table with buttons: ['copy', 'excel', 'pdf', 'print', 'csv'] and four of them show up but the Excel button is missing. There is no error message in the console.

Any idea? Is there a better approach than using all of these individual files and getting the order exactly right? (I'm already dreading the first time I'll try to upgrade DT to a new version...)

hheimbuerger

As for the Excel button, it appears and works if you follow this advice here and assign the jszip module to window.JSZip. (I was able to do this as the first line in my module, i.e. after loading datatables.net-buttons.)

So I think everything's working now. It feels really messy and unstable, but at least it loads and runs.

I'm still interested in any suggestions how to clean up this configuration.

allan

The reason I don't yet have detailed instructions for RequireJS is because how difficult it appears to be to get CSS loading to work correctly with it. Its super easy to get Javascript to load, but as soon as you involve CSS you need plug-ins and super long require strings - and DataTables without CSS is fairly useless. Any suggestions on that are welcome.

With NPM / CommonJS Buttons will accept JSZip and pdfMake as optional parameters for the exported method. perhaps the AMD loader should do likewise.

Is there a better approach than using all of these individual files and getting the order exactly right?

In theory, once DataTables has been loaded, you should be able to load everything else in any order.

Allan

hheimbuerger

Yeah, this stuff is hard.

So the reason I'm personally not concerned with CSS is that my CSS files are compiled by a completely separate pipeline in my case. I suspect that's not a very common case, though.

In my experience, the order of dependencies was not irrelevant at all. I was trying to tweak it into the right order for an hour, unsuccessfully. Specifically the buttons would always just not show up without an error message. Until I finally realized that the DT download page had all the time shown me the right order (thumbsup!), I had just never needed that because in the past I had just used the preconcatenated file.