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.

2

Your Answer

Sign up or log in

Sign up using Google Sign up using Facebook Sign up using Email and Password Submit

Post as a guest

Post Your Answer Discard

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy