DataTables: Uncaught TypeError: Cannot read button properties undefined

Question

I'm having trouble setting up custom data tables that use the Buttons plugin.

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

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

But if I try to include the character “B” 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 button properties undefined

What am I doing wrong?

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

Answer 1

I figured this out when developing this question. Divide the hard answer you get here:

It is not enough just to include the appropriate JS assets (jquery.dataTables.min.js, dataTables.buttons.min.js, etc.). You should also call the Buttons plugin, or by expanding the default values ​​using the button object element:

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

Or you can call it with dataTable() initialization:

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

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