I'm using Materialize as my UI framework and I'm using DataTables for my tables. I have a table which I need to export to excel and I can do it just fine using the DataTables buttons. However, they are the default DataTables buttons, and I would like to use the Materialize buttons.
So the question is: how can I use my own buttons and have them do the functions of the built-in buttons of DataTables (specifically exporting to Excel)?
I already tried using the option "className" to the Materialize button class, but that didn't work. I figure I probably will have to do some JQuery function.
Thanks everyone!
EDIT: Here's my code:
$(document).ready(function() {
var dataTable = $('#datatable').DataTable( {
language: {
search: "",
searchPlaceholder: "Search"
},
dom: 'Brftip',
buttons: [
'copy',
'csv',
'excel',
'pdf',
'print'
]
} );
Use buttons.dom.button
to define class and element that would be used for a button.
For example:
var table = $('#example').DataTable({
"ajax": 'https://api.myjson.com/bins/qgcu',
"order": [],
"dom": 'Bfrtip',
"buttons": {
"dom": {
"button": {
"tag": "button",
"className": "waves-effect waves-light btn mrm"
}
},
"buttons": [ 'copyHtml5', 'excelHtml5', 'csvHtml5', 'pdfHtml5' ]
}
});
See this jsFiddle for code and demonstration.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With