Editor Export drop-down menu not populated

robsimpson

I am trying to add Export buttons to an instance of Editor - prior to this, all is working well.

Following https://editor.datatables.net/examples/extensions/exportButtons.html, I have added the following scripts to the html:

<!-- EXISTING IMPORTS -->
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jqc-1.12.4/moment-2.18.1/dt-1.12.1/b-2.2.3/date-1.1.2/sl-1.4.0/datatables.min.css">
    <link rel="stylesheet" type="text/css" href="css/generator-base.css">
    <link rel="stylesheet" type="text/css" href="css/editor.dataTables.min.css">

    <script type="text/javascript" charset="utf-8" src="https://cdn.datatables.net/v/dt/jqc-1.12.4/moment-2.18.1/dt-1.12.1/b-2.2.3/date-1.1.2/sl-1.4.0/datatables.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="js/dataTables.editor.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="js/table.__twentysix_test.js"></script>
    <script type="text/javascript" charset="utf-8" src="js/functions.js"></script>

    <script type="text/javascript" charset="utf-8" src="js/bundleaxios.js"></script>

    
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/datetime/1.1.2/css/dataTables.dateTime.min.css">
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/datetime/1.1.2/js/dataTables.dateTime.min.js"></script>

    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.4.0/css/select.dataTables.min.css">
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/select/1.4.0/js/dataTables.select.min.js"></script>

    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/searchpanes/2.0.1/css/searchPanes.dataTables.min.css">
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/searchpanes/2.0.1/js/dataTables.searchPanes.min.js"></script>

    <script type="text/javascript" charset="utf8" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.2/moment.min.js"></script>
      
    <script type="text/javascript" charset="utf8" src="https://code.highcharts.com/highcharts.js"></script>

    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/plug-ins/1.10.19/sorting/datetime-moment.js"></script>

    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/searchbuilder/1.3.2/css/searchBuilder.dataTables.min.css">
    <script type="text/javascript" charset="utf8" src="https:////cdn.datatables.net/searchbuilder/1.3.2/js/dataTables.searchBuilder.min.js"></script>

<!-- NEW IMPORTS -->
    <script type="text/javascript" type="text/css" href="https://code.jquery.com/jquery-3.5.1.js"></script>
    <script type="text/javascript" type="text/css" href="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
    <script type="text/javascript" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
    <script type="text/javascript" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
    <script type="text/javascript" type="text/css" href="https://cdn.datatables.net/buttons/2.2.2/js/buttons.html5.min.js"></script>
    <script type="text/javascript" type="text/css" href="https://cdn.datatables.net/buttons/2.2.2/js/buttons.print.min.js"></script>
    <script type="text/javascript" type="text/css" href="https://cdn.datatables.net/colreorder/1.5.5/js/dataTables.colReorder.min.js"></script>

To the table definition I have added the extended collection:

        buttons: [
            { extend: 'create', editor: editor },
            { extend: 'edit',   editor: editor },
            { extend: 'remove', editor: editor },
            {
                extend: 'collection',
                text: 'Export',
                buttons: [
                    'copy',
                    'excel',
                    'csv',
                    'pdf',
                    'print'
                ]
            }
        ],

The button appears, but on clicking it I get a greyed-out page with a small (white) blank element. This is a menu div with no content:

<div class="dt-button-collection" aria-modal="true" role="dialog" style="top: 693.641px; left: 188.446px;">
    <div role="menu"> </div>
</div>

Is there something obvious I am missing?

Thanks,

Rob

kthorngren

The problem is that you are importing jquery.js and datatables.js twice. The first time in line 6 then again in lines 33 and 34. This won't work. Only import these once.

Click on the CDN link in line 6 to open the CDN file. You will see a link update the libraries in the file. Open that link select the new buttons option then replace lines 2 and 6 with the updated CDN.

Kevin

robsimpson

select the new buttons option

How do I do that? I can only see Buttons 2.2.3 in that link. Do I need to change the link? If so, to what version?

kthorngren

When you open the CDN link you should find this:

• To rebuild or modify this file with the latest versions of the included
  
  • software please visit:
  • https://datatables.net/download/#dt/jqc-1.12.4/moment-2.18.1/dt-1.12.1/b-2.2.3/date-1.1.2/sl-1.4.0

Open the link https://datatables.net/download/#dt/jqc-1.12.4/moment-2.18.1/dt-1.12.1/b-2.2.3/date-1.1.2/sl-1.4.0 in your web browser. This will open the Download Builder with the current options selected. Select any additional you want to generate the new CDN link.

Kevin

robsimpson

Ah, I think you mean include the various sub buttons... will do

robsimpson

Sorted, many thanks!