Using DataTables Buttons in Magento 2
Using DataTables Buttons in Magento 2
![brenik](https://secure.gravatar.com/avatar/db39f91c5da447bdbcc6e0ace2041bac/?default=https%3A%2F%2Fvanillicon.com%2Fdb39f91c5da447bdbcc6e0ace2041bac_200.png&rating=g&size=120)
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.
Next:
<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.
Replies
I don't know anything about magento I'm afraid, but you need to add the
B
option indom
to display the buttons on the page - see example here. Hopefully that will do the trick,Colin
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.
if I try use this construction:
I get this error:
Magento has wanted find object datatables.net-buttons in not existing files datatables.net-buttons.js
After rename dataTables.buttons.js to datatables.net-buttons.js I got new error
In this way no errors, but dataTable doesn't works.
if delete load on section script related buttons, that simle datatables works.
Are you able to link to a page showing this issue, so we can see which libraries are being included?
Colin
Bingo! I did it!
Work configuration:
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'] ], } ); } ); });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)
``
html5 works well
Bingo, I did It!
this works
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,
buttons 'copy', 'csv', 'excel', 'pdf', 'print' work only without pagination
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:
Kevin
@kthorngren you right,comma. Thanks!!!
It remains to find what wrong with PDF
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.
Anyway PDF sometimes get error
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
Find new issue, "excel" button didn't showing
All other showing, only PDF not always warks.
Sounds like these libraries aren't being loaded properly:
Can you post a link to your page or a test case replicating the issue so we can help debug?
Kevin
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.
Reload all js from button example, and get new error
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
That means that pdfmake's
vfs_fonts.js
file hasn't been loaded.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
@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