Topic: DataTables buttons-option not supportet?
Piotr Glejzer staff answered 5 years ago
Hello,
I think this is not still available in our packages. You probably have to add javascript code with buttons for your own.
Best,
Piotr
Piotr Glejzer staff answered 5 years ago
Yes, we know that. We have a task for that to check it and implement it. MDB styles not connected with datatables buttons csv, pdf, excel . We didn't included tihs to our package yet but if you are including datatables script like :
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/jszip-2.5.0/dt-1.10.18/b-1.5.4/b-colvis-1.5.4/b-flash-1.5.4/b-html5-1.5.4/b-print-1.5.4/datatables.min.js"></script>
and style like
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jszip-2.5.0/dt-1.10.18/b-1.5.4/b-colvis-1.5.4/b-flash-1.5.4/b-html5-1.5.4/b-print-1.5.4/datatables.min.css" />
Buttons will work but styling is bad. How I said.
maskinarbeten premium commented 5 years ago
we're also in need of having the buttons in our project, any timeframe on when it could be implemented? Thanks :)
MDBootstrap staff commented 5 years ago
This topic awaits its turn in our production cycle. Thank you for pointing out that you want this feature to be done. I pushed this task to a higher priority list.
r.sonnenberg free commented 5 years ago
An implementation of the buttons would be great. The styling is bad when MDB styles are not connected.
MDBootstrap staff commented 5 years ago
Thanks for the feedback. I already pushed it higher on our priority list. Now we need to wait for the next release cycle. Someone should take care of this issue.
.jodadev. pro commented 5 years ago
Any update on this? Buttons are extremely important to use in DataTables. I would replace the plug-in that comes from MDB with the original one since it doesn't include the feature, but it then creates whole other problems on the page. So any update for this very important feature? Thanks!
Mighty Midget pro answered 5 years ago
Using your solution as a base I got the jquery version to work by replacing the datatables.js that comes with MDB Pro. I used a copy downloaded from datatables.net which included the necessary code for the buttons. I didn't replace the CSS as everything required is in the MDB CSS files.
All that is needed then is to set the options when calling the function.
$(document).ready(function () {
$('#dtMaterialDesignExample').DataTable({
dom: 'Bfrtip',
buttons: [
{
extend: 'csv',
className: 'btn btn-outline btn-sm',
text: 'Save to CSV',
},
{
extend: 'excel',
className: 'btn btn-outline btn-sm',
text: 'Save to Excel',
},
{
extend: 'print',
className: 'btn btn-outline btn-sm',
text: 'Print Table',
},
{
extend: 'pdf',
className: 'btn btn-outline btn-sm',
text: 'Save to PDF',
orientation: 'landscape',
pageSize: 'A4'
},
{
extend: 'copy',
className: 'btn btn-outline btn-sm',
text: 'Copy to clipboard',
}
]
});
$('#dtMaterialDesignExample_wrapper').find('label').each(function () {
$(this).parent().append($(this).children());
});
$('#dtMaterialDesignExample_wrapper .dataTables_filter').find('input').each(function () {
$('input').attr("placeholder", "Search");
$('input').removeClass('form-control-sm');
});
$('#dtMaterialDesignExample_wrapper .dataTables_length').addClass('d-flex flex-row');
$('#dtMaterialDesignExample_wrapper .dataTables_filter').addClass('md-form');
$('#dtMaterialDesignExample_wrapper select').removeClass('custom-select custom-select-sm form-control form-control-sm');
$('#dtMaterialDesignExample_wrapper select').addClass('mdb-select');
$('#dtMaterialDesignExample_wrapper .mdb-select').material_select();
$('#dtMaterialDesignExample_wrapper .dataTables_filter').find('label').remove();
});
This approach breaks the number of entries per page selector though.
Marta Wierzbicka staff commented 5 years ago
Hi, do you need more help with that? Best, Marta
Mighty Midget pro commented 5 years ago
Hi, since the datatables addon included with MDB doesn't contain the packages needed to implement datatable buttons and replacing with a package from datatables.net breaks some functionality - yes please.
Thank you
Arnt Oddvar Pedersen pro answered 5 years ago
Datatables-buttons don't need anything special from MDB to work out of the box. Here's how I have it set up on our control panel:
import pdfMake from 'pdfmake/build/pdfmake';
import pdfFonts from 'pdfmake/build/vfs_fonts';
import 'datatables.net';
import 'datatables.net-buttons';
import 'datatables.net-buttons-bs4';
import '../node_modules/datatables.net-buttons/js/buttons.html5';
import '../node_modules/datatables.net-buttons/js/buttons.print';
import * as JSZip from 'jszip';
pdfMake.vfs = pdfFonts.pdfMake.vfs;
window.JSZip = JSZip;
const $table = $('#myTableWithButtons').DataTable({
dom: 'Bfrtip',
buttons: [
{
extend: 'csv',
className: 'btn-mdb-color mr-2',
},
{
extend: 'pdf',
className: 'btn-mdb-color mr-2',
},
{
extend: 'print',
className: 'btn-mdb-color mr-2',
},
],
});
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Pro
- Premium support: No
- Technology: MDB jQuery
- MDB Version: 4.7.3
- Device: windows
- Browser: chrome
- OS: win10
- Provided sample code: No
- Provided link: No
Piotr Glejzer staff commented 5 years ago
Hi,
which buttons do you talking about?
Mighty Midget pro commented 5 years ago
https://datatables.net/extensions/buttons/examples/
I assume he means these buttons. They would be incredibly useful if implemented. Do you plan to do so?
Piotr Glejzer staff commented 5 years ago
It''s good idea so I will put that in our task to do. Thank you so much.