DataTables

Question

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

所以问题是：如何使用自己的按钮并让它们执行 DataTables 内置按钮的功能（具体导出到 Excel）？

我已经尝试将选项 "className" 用于 Materialize 按钮 class，但这没有用。我想我可能需要做一些 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 到 select 按钮并在 drawcallback 中添加 class。像这样：

$('.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 定义 class 和将用于按钮的元素。

例如：

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。

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

DataTables - How can I use my own buttons for exporting?

javascript

excel

jquery

materialize