Using DataTables Buttons in Magento 2

brenik · July 2023

Hi there!
Is there a possibility using DataTables Buttons in Magento 2?
Simple DataTablesd works well in Magento2, but when I try add any buttons, DataTables stop working without errors.

requirejs-config.js

    paths: {
        'dataTables': [
                'My_Module/js/dataTable/jquery.dataTables',
                'My_Module/js/dataTable/dataTables.buttons',
                'My_Module/js/dataTable/jszip',
                'My_Module/js/dataTable/pdfmake',
                'My_Module/js/dataTable/vfs_fonts',
                'My_Module/js/dataTable/buttons.html5',
                'My_Module/js/dataTable/buttons.print'
        ]
    },

Layout.xml

    <head>
        <css src="css/jquery.dataTables.css"/>
        <css src="css/buttons.dataTables.css"/>
    </head>

Template

<script type="text/javascript">
    require([
        'jquery',
        'dataTables',
    ], function ($) {
        "use strict";
        $(document).ready( function () {
            $('#table').DataTable({
                dom: 'Bfrtip',
                buttons: [
                    'copy', 'csv'
                ],
                "pageLength": -1,
                lengthMenu: [
                    [10, 25, 50,  -1],
                    [10, 25, 50,  'All']
                ],
                "dom": '<"wrapper"flipt>'
            });
        } );
    });
</script>

Doesn't work buttons. No errors. Simple DataTables without buttons work well.

Next try

requirejs-config.js

   paths: {
        'dataTables': 'My_Module/js/dataTable/jquery.dataTables',
        'datatables.net': 'My_Module/js/dataTable/jquery.dataTables',
        'datatables_buttons': 'My_Module/js/dataTable/dataTables.buttons',
        'datatables.net-buttons': 'My_Module/js/dataTable/dataTables.buttons',
        'jszip':'My_Module/js/dataTable/jszip',
        'pdfmake':'My_Module/js/dataTable/pdfmake',
        'vfs_fonts':'My_Module/js/dataTable/vfs_fonts',
        'buttons.html5':'My_Module/js/dataTable/buttons.html5',
        'buttons.print':'My_Module/js/dataTable/buttons.print'
    },
    shim: {
        'dataTables': {
            'deps': ['jquery']
        },
        'datatables.net': {
            'deps': ['jquery']
        },
        'datatables_buttons': {
            'deps': ['jquery','datatables.net',]
        },
        'datatables.net-buttons': {
            'deps': ['jquery','datatables.net',]
        },
        'jszip': {
            'deps': ['jquery','datatables.net']
        },
        'pdfmake': {
            'deps': ['jquery','datatables.net']
        },
        'vfs_fonts': {
            'deps': ['jquery','datatables.net']
        },
        'buttons.html5': {
            'deps': ['jquery','datatables.net','datatables.net-buttons']
        },
        'buttons.print': {
            'deps': ['jquery','datatables.net','datatables.net-buttons']
        },
    },

I added some duplication 'datatables.net' and 'datatables.net-buttons', because was error that files can't find.

<script type="text/javascript">
    require([
        'jquery',
        'dataTables',
    ], function ($) {
        "use strict";
        $(document).ready( function () {
            $('#table').DataTable({
                dom: 'Bfrtip',
                buttons: [
                    'copy', 'csv'
                ],
                "pageLength": -1,
                lengthMenu: [
                    [10, 25, 50,  -1],
                    [10, 25, 50,  'All']
                ],
                "dom": '<"wrapper"flipt>'
            });
        } );
    });
</script>

Simple DataTables without buttons work well. But buttons didn't appears.

<script type="text/javascript">
    require([
        'jquery',
        'dataTables',
        'datatables_buttons',
        'jszip',
        'pdfmake',
        'vfs_fonts',
        'buttons.html5',
        'buttons.print',
    ], function ($) {
        "use strict";
        $(document).ready( function () {
            $('#table').DataTable({
                dom: 'Bfrtip',
                buttons: [
                    'copy', 'csv'
                ],
                "pageLength": -1,
                lengthMenu: [
                    [10, 25, 50,  -1],
                    [10, 25, 50,  'All']
                ],
                "dom": '<"wrapper"flipt>'
            });
        } );
    });
</script>

Simple DataTables doesn't works, no errors in console.

Thanks for any idea.

colin · July 2023

I don't know anything about magento I'm afraid, but you need to add the B option in dom to display the buttons on the page - see example here. Hopefully that will do the trick,

Colin

brenik · July 2023

Thanks @Colin.
I can manually add to page <div class="dt-buttons"> .... </div>, but no action happens.

dataTables.buttons.js must add B option in dom, but maybe some security policy magento restrict it.
Need find enother way load dataTables.buttons.js or create my JS function that make some action with dataTables data.

brenik · July 2023

if I try use this construction:

            var table = $('#order_group_product_table').DataTable();

            new $.fn.dataTable.Buttons( table, {
                buttons: [
                    'copy', 'excel', 'pdf'
                ]
            } );

I get this error:

GET https://fox....de/static/adminhtml/Theme/ThemeBackend/en_US/datatables.net-buttons.js net::ERR_ABORTED 404 (Not Found)

(anonymous) @ (index):1949
fox.bobbie.de/:1 Refused to execute script from 'https://fox.....de/static/adminhtml/Theme/ThemeBackend/en_US/datatables.net-buttons.js' because its MIME type ('text/plain') is not executable, and strict MIME type checking is enabled.

Magento has wanted find object datatables.net-buttons in not existing files datatables.net-buttons.js

brenik · July 2023

After rename dataTables.buttons.js to datatables.net-buttons.js I got new error

jquery.js:4050 jQuery.Deferred exception: $.fn.dataTable.Buttons is not a constructor TypeError: $.fn.dataTable.Buttons is not a constructor
    at HTMLDocument.<anonymous> (https://fox..de/admin/....._id/1192/key/67a3ce0d019607531080ca0edcdbd3574a42e3cabc90a09b7ae453beeb73706e/:1994:13)
    at mightThrow (https://fox..de/static/adminhtml/My/ThemeBackend/en_US/jquery.js:3766:60)
    at process (https://fox..de/static/adminhtml/My/ThemeBackend/en_US/jquery.js:3834:49) undefined

brenik · July 2023

In this way no errors, but dataTable doesn't works.

    paths: {
        'dataTables': 'My_Project/js/dataTable/jquery.dataTables',
        'datatables.net': 'My_Project/js/dataTable/jquery.dataTables',
        'datatables_buttons': 'My_Project/js/dataTable/dataTables.buttons',
        'datatables.net-buttons': 'My_Project/js/dataTable/dataTables.buttons',
        'jszip':'My_Project/js/dataTable/jszip',
        'pdfmake':'My_Project/js/dataTable/pdfmake',
        'vfs_fonts':'My_Project/js/dataTable/vfs_fonts',
        'buttons.html5':'My_Project/js/dataTable/buttons.html5',
        'buttons.print':'My_Project/js/dataTable/buttons.print'
    },

<script type="text/javascript">
    require([
        'jquery',
        'dataTables',
        'datatables.net-buttons',
        'jszip',
        'pdfmake',
        'vfs_fonts',
        'buttons.html5',
        'buttons.print',
    ], function ($) {
        "use strict";
        $(document).ready( function () {
            var table = $('#test_table').DataTable();
            new $.fn.dataTable.Buttons( table, {
                buttons: [
                    'copy', 'excel', 'pdf'
                ]
            } );
</script>

if delete load on section script related buttons, that simle datatables works.

<script type="text/javascript">
    require([
        'jquery',
        'dataTables',
    ], function ($) {
        "use strict";
        $(document).ready( function () {
            var table = $('#test_table').DataTable();
            new $.fn.dataTable.Buttons( table, {
                buttons: [
                    'copy', 'excel', 'pdf'
                ]
            } );
</script>

colin · July 2023

Are you able to link to a page showing this issue, so we can see which libraries are being included?

Colin

brenik · July 2023

Bingo! I did it!
Work configuration:

theme requirejs-config.js
var config = {
    paths: {
        'datatables.net': 'js/dataTable/jquery.dataTables',
        'datatables.net-buttons': 'js/dataTable/dataTables.buttons',
        'jszip':'js/dataTable/jszip',
        'pdfmake':'js/dataTable/pdfmake',
        'vfs_fonts':'js/dataTable/vfs_fonts',
        'buttons.html5':'js/dataTable/buttons.html5',
        'buttons.print':'js/dataTable/buttons.print'
    },
};
````

tamplate

require([ 'jquery', 'datatables.net', 'datatables.net-buttons', 'jszip', 'pdfmake', 'vfs_fonts', 'buttons.html5', 'buttons.print', ], function ($) { "use strict"; $(document).ready( function () { $('#_test_table').DataTable( { dom: 'Blfrtip', buttons: [ 'copyHtml5', 'excelHtml5', 'csvHtml5', 'pdfHtml5' ], "pageLength": -1, lengthMenu: [ [10, 25, 50, -1], [10, 25, 50, 'All'] ], } ); } ); });

Buttons shown, but pdf export got error, need research it )

Uncaught TypeError: _pdfMake(...).createPdf is not a function
at _Api.action (buttons.html5.js:1511:24)
at action (dataTables.buttons.js:775:19)
at HTMLButtonElement.<anonymous> (dataTables.buttons.js:796:7)
at HTMLButtonElement.dispatch (jquery.js:5430:49)
at elemData.handle (jquery.js:5234:47)


Issue was in dom: two times dom

            dom: 'Bfrtip',
            buttons: [
                'copy', 'csv'
            ],
            "pageLength": -1,
            lengthMenu: [
                [10, 25, 50,  -1],
                [10, 25, 50,  'All']
            ],
            "dom": '<"wrapper"flipt>'
        });


and this way didn't show

   buttons: [
                'copy', 'csv', 'excel', 'pdf', 'print'
            ]

``
html5 works well

                buttons: [
                    'copyHtml5',
                    'excelHtml5',
                    'csvHtml5',
                    'pdfHtml5'
                ],

brenik · July 2023

Bingo, I did It!

this works

requiresjs-config.js
var config = {
    paths: {
        'select2': 'js/select2.min',
        'datatables.net': 'js/dataTable/jquery.dataTables',
        'datatables.net-buttons': 'js/dataTable/dataTables.buttons',
        'jszip':'js/dataTable/jszip',
        'pdfmake':'js/dataTable/pdfmake',
        'vfs_fonts':'js/dataTable/vfs_fonts',
        'buttons.html5':'js/dataTable/buttons.html5',
        'buttons.print':'js/dataTable/buttons.print'
    },
};

tamplate

<script type="text/javascript">
    require([
        'jquery',
        'datatables.net',
        'datatables.net-buttons',
        'jszip',
        'pdfmake',
        'vfs_fonts',
        'buttons.html5',
        'buttons.print',
    ], function ($) {
        "use strict";
        $(document).ready( function () {
            $('#test_table').DataTable( {
                dom: 'Blfrtip',
                buttons: [
                    'copyHtml5',
                    'excelHtml5',
                    'csvHtml5',
                    'pdfHtml5'
                ],
                    "pageLength": -1,
                    lengthMenu: [
                        [10, 25, 50,  -1],
                        [10, 25, 50,  'All']
                    ],

            } );

        } );
    });
</script>

issue were in
1 - two times dom set
2 - buttons name 'copy', 'csv', 'excel', 'pdf', 'print' didn't work, but 'copyHtml5', 'excelHtml5', 'csvHtml5', 'pdfHtml5' works well

One more issue in pdf export,

Uncaught TypeError: _pdfMake(...).createPdf is not a function
    at _Api.action (buttons.html5.js:1511:24)
    at action (dataTables.buttons.js:775:19)
    at HTMLButtonElement.<anonymous> (dataTables.buttons.js:796:7)
    at HTMLButtonElement.dispatch (jquery.js:5430:49)
    at elemData.handle (jquery.js:5234:47)

brenik · July 2023

buttons 'copy', 'csv', 'excel', 'pdf', 'print' work only without pagination

             // dom: 'Blfrtip',
                dom: 'Bfrtip',
                buttons: [
                    'copy', 'csv', 'excel', 'pdf', 'print'
                ]
                // buttons: [
                //     'copyHtml5',
                //     'excelHtml5',
                //     'csvHtml5',
                //     'pdfHtml5'
                // ],
                //     "pageLength": -1,
                //     lengthMenu: [
                //         [10, 25, 50,  -1],
                //         [10, 25, 50,  'All']
                //     ],

kthorngren · July 2023

Looks like you are missing a comma, after the bracket, on line 5 causing a syntax error. Look at the browser's console for errors. Should look like this:

   buttons: [
       'copy', 'csv', 'excel', 'pdf', 'print'
   ],

Kevin

brenik · July 2023

@kthorngren you right,comma. Thanks!!!
It remains to find what wrong with PDF

Uncaught TypeError: _pdfMake(...).createPdf is not a function
    at _Api.action (buttons.html5.js:1511:24)
    at action (dataTables.buttons.js:775:19)
    at HTMLButtonElement.<anonymous> (dataTables.buttons.js:796:7)
    at HTMLButtonElement.dispatch (jquery.js:5430:49)
    at elemData.handle (jquery.js:5234:47)

brenik · July 2023

PDF start working.
I had error that not enough map file, and added pdfmake.js.map. Issue was in this file.
Now All works well. Thanks for All.
This experience can be useful for developers Magento, because Datatables is great thing.

brenik · July 2023

Anyway PDF sometimes get error

Uncaught TypeError: _pdfMake(...).createPdf is not a function
    at _Api.action (buttons.html5.js:1511:24)
    at action (dataTables.buttons.js:775:19)
    at HTMLButtonElement.<anonymous> (dataTables.buttons.js:796:7)
    at HTMLButtonElement.dispatch (jquery.js:5430:49)
    at elemData.handle (jquery.js:5234:47)

If after load page first click buttons "Copy" or "CSV", than "PDF" works well, but if first after load page click "PDF", than get error

brenik · July 2023

Find new issue, "excel" button didn't showing

$('#order_group_product_table').DataTable({
                dom: 'Blfiptip',
                buttons: [
                   'copy', 'csv', 'excel', 'pdf',
                    {
                        extend: 'print',
                        title: '',
                    },
                ],
                "pageLength": -1,
                lengthMenu: [
                    [10, 25, 50, -1],
                    [10, 25, 50, 'All']
                ],
            });

All other showing, only PDF not always warks.

kthorngren · July 2023

Sounds like these libraries aren't being loaded properly:

        'jszip':'js/dataTable/jszip',
        'pdfmake':'js/dataTable/pdfmake',
        'vfs_fonts':'js/dataTable/vfs_fonts',

Can you post a link to your page or a test case replicating the issue so we can help debug?

Kevin

brenik · July 2023

Unfortunately, this only local yet. I can't move it to server with this issue.
It really loaded in order:
'datatables.net',
'datatables.net-buttons',
'jszip',
'pdfmake',
'vfs_fonts',
'buttons.html5',
'buttons.print',

I debugged order loading files.

brenik · July 2023

Reload all js from button example, and get new error

pdfmake.min.js:8 Uncaught File 'Roboto-Regular.ttf' not found in virtual file system

brenik · July 2023

Load last 'pdfmake', 'vfs_fonts', got
```
buttons.html5.min.js:8 Uncaught TypeError: s(...).createPdf is not a function
at B.action (buttons.html5.min.js:8:24724)
at a (dataTables.buttons.min.js:4:6570)
at HTMLButtonElement.<anonymous> (dataTables.buttons.min.js:4:6941)
at HTMLButtonElement.dispatch (jquery.js:5430:49)
at elemData.handle (jquery.js:5234:47)
````
but first load page Pdf were exported, after reload page got error

allan · July 2023

Uncaught File 'Roboto-Regular.ttf' not found in virtual file system

That means that pdfmake's vfs_fonts.js file hasn't been loaded.

but first load page Pdf were exported, after reload page got error

There must be some kind of async loading of the files going on. We'd really need a link to a page showing the issue so I can put a debugger on it to see what is happening.

Allan

brenik · July 2023

@allan Hi
Last 'pdfmake', 'vfs_fonts' decide issue 'Roboto-Regular.ttf'.
For now we decide remove PDF button, all other buttons works well. If stuff wanted PDF export, we would create some test page that can be accessed and debugged.
Thanks for dataTables, this very great thing and can be very useful.
Vitalii

Using DataTables Buttons in Magento 2

Using DataTables Buttons in Magento 2

Replies

Howdy, Stranger!

Categories

DataTables

Using DataTables Buttons in Magento 2

Using DataTables Buttons in Magento 2

Replies

Howdy, Stranger!

Quick Links

Categories

DataTables