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

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

因此，问题是：我如何使用自己的按钮，让它们实现数据表内置按钮的功能（特别是导出到Excel）？

我已经尝试使用选项“className”来具体化按钮类，但没有成功。我想我可能需要做一些JQuery函数

谢谢大家

编辑：这是我的代码：

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

---

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

您应该使用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' ]   
    }
});

---

有关代码和演示，请参见。

请显示您的代码@谢谢你。这是相当标准的数据表代码。检查我的主要帖子上的编辑。您提供了自定义按钮的代码。但是OP想改变现有按钮的样式。你是对的，我应该更具体一些：对我来说，按钮是一些html和点击动作。因此，我建议创建一个具有所需外观的新按钮，而不是修改原始按钮。这可以翻译为：buttons:[{extend:'csvHtml5'，text:“}]我认为这也不起作用，因为button仍然会有

div

内部的默认样式。谢谢！那不行，朋友。你不需要JQuery，DataTables有一个按钮的“className”选项，我已经试过了，就像我在帖子中说的。但是，该按钮看起来不像物化按钮。这是一个屏幕截图（第一行是我希望他们看起来如何，第二行是他们看起来如何）：啊，对不起，我看错了。我承认我不是专家。我想在我的数据表上使用引导按钮，只有在我的“drawCallback”中使用addClass才能使它工作。是的，你明白了！非常感谢你！我不想碰运气，但你也不知道如何将分页更改为物化分页，是吗？如果你不介意的话，别担心，我会自己想办法的。但再次感谢你们@T.Ferreira，这只是一个破解，但看看这个例子吧！我明天去看看是否能改进。但是非常感谢你，你帮了我很大的忙！再次感谢你！你真的很棒！你似乎对数据表很了解，所以你介意我多给你点建议吗？我有一个按钮向表中添加一个新项目，我使用了一个模式。因此，当用户单击该按钮时，会弹出一个带有项目详细信息的表单。我正在使用Materialize中的Modals（请参见此处：）。这是我对该按钮的代码：

。因此，我要做的是将该按钮与其他按钮（excel、copy等）对齐。我想也许可以创建一个自定义DataTables按钮，该按钮的功能与此按钮相同，但这需要能够为按钮提供id，这在DataTables中似乎是不可能的。为了使模式工作，它必须有一个id，正如您在Materialize站点中看到的那样。你知道我怎么做吗？

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

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