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/
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With