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 /

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/

• javascript
• datatables
• datatables-1.10

1 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.