$.extend() datatables with export buttons?

$.extend() datatables with export buttons?

HamsterOfDoomHamsterOfDoom Posts: 2Questions: 1Answers: 0
edited December 2020 in Free community support

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

  • colincolin Posts: 15,237Questions: 1Answers: 2,599

    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

  • HamsterOfDoomHamsterOfDoom Posts: 2Questions: 1Answers: 0
    edited December 2020

    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:

        <script src="/js/datatables.min.js"></script>
        ...
        <script>
        if($.fn.hasOwnProperty('dataTable')) {
            console.log('set table default');
            $.extend(true, $.fn.dataTable.defaults, {
                pageLength: 20,
                lengthMenu: [[20, 50, 100, 200, 400,-1], [20, 50, 100, 200,  400, "- All -"]],
                dom: 'lBfrtip',
                buttons: [
                    'copy', 'excel'
                ]
            });
        };
        </script>
        
        ...
        
        /* sneaky bastard must have been copied in accidently - works after removing this line: */
        <script src="/js/datatables.min.js"></script>
    
    
       /* init table with extended settings */
        <script>
        console.log('Load table with preferences');
        $('.dataTable').DataTable();
        </script>
    

    It is working now.
    Thanks anyway and have a nice Christmas!

  • colincolin Posts: 15,237Questions: 1Answers: 2,599

    Excellent, thanks for the update,

    Colin

This discussion has been closed.