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

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

1 Answer

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 for examples of both approaches working.