数据表 – 如何使用我自己的button进行导出？

我正在使用Materialize作为我的UI框架，我正在为我的表使用DataTables。 我有一个表，我需要导出到Excel，我可以做到这一点使用DataTablesbutton。 但是，它们是默认的DataTablesbutton，我想使用Materializebutton。

所以问题是： 我怎样才能使用我自己的button，让他们做数据表的内置button（特别是导出到Excel）的function？

我已经尝试使用选项“className”到物化button类，但没有奏效。 我想我可能将不得不做一些JQueryfunction。

感谢大家！

编辑：这是我的代码：

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

Answer 1

使用buttons.dom.button来定义将用于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' ] } }); 

看到这个jsFiddle的代码和演示。

Answer 2

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

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

“文本”可以是您的自定义button的HTML

Answer 3

你应该使用Jquery来selectbutton，并在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' ] } });