DataTables - 我如何使用自己的按钮进行导出？

Question

我使用 Materialize 作为我的 UI 框架，我使用 DataTables 作为我的表。我有一个需要导出到 excel 的表，我可以使用 DataTables 按钮完成它。但是，它们是默认的 DataTables 按钮，我想使用 Materialize 按钮。

那么问题来了：如何使用自己的按钮，并让它们完成DataTables内置按钮的功能（特别是导出到Excel）？

我已经尝试在 Materialise 按钮​​类中使用“className”选项，但是没有用。我想我可能需要做一些 JQuery 函数。

谢谢大家！

编辑：这是我的代码：

$(document).ready(function() {
var dataTable = $('#datatable').DataTable( {
    language: {
        search: "",
        searchPlaceholder: "Search"
    },
    dom: 'Brftip',
    buttons: [
        'copy',
        'csv',
        'excel',
        'pdf',
        'print'
    ]
} );

Answer 1

https://datatables.net/extensions/buttons/custom

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

“text”可以是自定义按钮的html

Answer 2

您应该使用 Jquery 选择按钮并在 drawcallback 中添加类。像这样的：

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

或者：

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

Answer 3

使用buttons.dom.button 定义将用于按钮的类和元素。

例如：

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

有关代码和演示，请参阅this jsFiddle。