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'
    ]
} );

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'
    ]
} );

• javascript
• jquery
• excel
• datatables
• materialize

• Show your code please! – CMedina Commented Jun 2, 2016 at 15:00
• @CMedina thank you. It's pretty standard DataTables code. Check the EDIT on my main post. – Telmo F. Commented Jun 2, 2016 at 15:04

3 Answers 3

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./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.

https://datatables/extensions/buttons/custom

buttons: [
    {
        text: 'Reload',
        action: function ( e, dt, node, config ) {
                dt.ajax.reload();
            }
        }
    ]

"text" can be the html to your custom button

You should use Jquery to select the button and add the class in the drawcallback. Something like this:

$('.buttons-excel').addClass('waves-effect waves-light btn');

Or:

 var table = $('#example').DataTable({
    "ajax": 'https://api.myjson./bins/qgcu',
    "order": [],
    "dom": 'Bfrtip',        
    "buttons": {
    "dom": {
       "button": {
        "tag": "button",
        "className": "waves-effect waves-light btn mrm"
       }
    },
     "buttons": [ 'copyHtml5', 'excelHtml5', 'csvHtml5', 'pdfHtml5' ]   
   }
 });