$.extend() datatables with export buttons?
$.extend() datatables with export buttons?

Link to test case: https://debug.datatables.net/ugohah
Debugger code (debug.datatables.net): ugohah (?)
Error messages shown: n/a
Description of problem:
Hi there,
I have an application with a few tables across multiple pages. I'm trying to clean up the code and initialize all tables globally with the same default options, as described on https://datatables.net/extensions/responsive/examples/initialisation/default.html
So far this works when setting a few basic options, this code is in my global.js (embedded in every page, before the other inline javascript is loaded):
<script>
$(function() {
$.extend( $.fn.dataTable.defaults, {
"pageLength": 50,
"lengthMenu": [[20, 50, 100, 200, 400,-1], [20, 50, 100, 200, 400, "- All -"]],
} );
});
</script>
When I try to add the "export to excel/copy to clipboard" buttons from https://datatables.net/extensions/buttons/examples/initialisation/export.html I don't get any buttons in my table, and there are no errors in the console. I checked and made sure I embedded all the required files in the correct order, however
it looks like datatables is just ignoring the buttons setting:
<script>
$(function() {
$.extend(true, $.fn.dataTable.defaults, {
"pageLength": 50,
"lengthMenu": [[20, 50, 100, 200, 400,-1], [20, 50, 100, 200, 400, "- All -"]],
"dom": 'lBfrtip',
"buttons": [
{
extend:'copy',
text: 'Copy',
},
{
extend: 'excel',
text: 'Excel',
}
]
});
});
</script>
I tried different things, and it only works when I move the buttons option inside each datables initialization:
<script>
$(function() {
//global setting
$.extend(true, $.fn.dataTable.defaults, {
"pageLength": 50,
"lengthMenu": [[20, 50, 100, 200, 400,-1], [20, 50, 100, 200, 400, "- All -"]],
});
/* other things ... */
// init templates table with export buttons
$('#templates').DataTable( {
"oSearch": {"sSearch": "Username"}
"dom": 'lBfrtip',
"buttons": [
{
extend:'copy',
text: 'Copy',
},
{
extend: 'excel',
text: 'Excel',
}
],
});
});
</script>
However this is no option, because my goal is to have the datables initialization in only one place ( $.extend... ), and not redeclare the export buttons again and again on each table in 10+ files.
Is this possible, and what am I doing wrong when I try to declare it in $.extend() above?
cheers, Daniel
Answers
We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.
Cheers,
Colin
Hi Colin and thanks for your reply,
Found the issue. On the page I was looking at I had accidently embedded datatables.min.js again after moving some code around:
It is working now.
Thanks anyway and have a nice Christmas!
Excellent, thanks for the update,
Colin