DataTables: Uncaught TypeError: Cannot read property 'buttons' of undefined

Question

I am having trouble setting up a custom dataTables that uses the Buttons plugin.

I can set up a custom default dom layout that works:

//vanilla dom (frtip...)
$.extend($.fn.dataTable.defaults, {
  dom: 'frtip'
});

But if I try to include the "B" character in the dom layout:

// Invoke Buttons plugin (Bfrtip...)
$.extend($.fn.dataTable.defaults, {
  dom: 'Bfrtip'
});

...then run dataTables, this JavaScript error is reported:

Uncaught TypeError: Cannot read property 'buttons' of undefined

What am I doing wrong?

Please see an example of this at https://jsfiddle.net/jhfrench/at83rcoL/

Miyokomizar

Answer 1

I figured it out while drafting this question. Sharing the hard-won answer here:

It is not enough to just include the relevant JS assets (jquery.dataTables.min.js, dataTables.buttons.min.js, etc). You also have to invoke the Buttons plugin by either extending the defaults with the button object element:

// Invoke Buttons plugin (Bfrtip...)
$.extend($.fn.dataTable.defaults, {
    buttons: [ 'copy', 'csv', 'excel' ]
});

Or you can call it at dataTable() initialization:

$("#table2").DataTable({
  buttons: [
    'copy', 'excel', 'pdf'
  ]
});

See https://jsfiddle.net/jhfrench/at83rcoL/8/ for examples of both approaches working.

Miyokomizar

Most of the built-in options for dom can be turned off and the dom option can still mention them and it won't blow up. Sadly, for the buttons plugin, you either have to omit the B if you aren't using buttons on a given DT instance, or ensure that if B is in dom, that buttons is defined in the options. This makes setting a nice default dom value sitewide that includes B problematic, as it assumes every instance will have buttons. Next time I work on this I'm going to try setting a default of buttons: false or buttons: [] and see if that fixes it. – Bascomb

Actually, I just tried it real quick in the above fiddle :) Sure enough, in the fiddle's first example (the one w/o buttons) if you set dom: 'Bfrtip' and provide buttons: [] it works! (buttons: false tosses an exception) – Bascomb