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

时间:2016-06-02 14:55:00

标签: javascript jquery excel datatables materialize

我使用Materialize作为我的UI框架,我正在使用DataTables作为我的表。我有一个表,我需要导出到Excel,我可以使用DataTables按钮做得很好。但是,它们是默认的DataTables按钮,我想使用Materialise按钮。

所以问题是:如何使用我自己的按钮让他们执行DataTables内置按钮的功能(特别是导出到Excel)?

我已经尝试将“className”选项用于Materialize按钮类,但这不起作用。我想我可能需要做一些JQuery函数。

谢谢大家!

编辑:这是我的代码:

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

3 个答案:

答案 0 :(得分:6)

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

例如:

pardiso_printstats

请参阅this jsFiddle以获取代码和演示。

答案 1 :(得分:0)

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

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

"文本"可以是自定义按钮的HTML

答案 2 :(得分:0)

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