如何在数据表的表格工具中用图标替换按钮？

Posted 2023-05-07

【中文标题】如何在数据表的表格工具中用图标替换按钮？

【英文标题】：How to replace button with icon in table tools in data table?

【发布时间】：2015-11-14 03:13:13

【问题描述】：

我有一个下载按钮，当单击下载按钮时，将显示选项。但我必须用汉堡图标替换它。我怎样才能做到这一点

当我点击汉堡图标时，应该会显示选项：

下载按钮必须改为汉堡图标

当我点击按钮时，必须显示选项

有什么办法可以做到吗？

这是我的数据表代码：

$(document).ready(function () 
    $('#ItemTable').DataTable(
        responsive: true,
        scrollX: true,
        lengthMenu: [10, 20, 50, 200, 400, 500, 1000],
        dom: 'T<"clear">lfrtip',
            "tableTools": 
            "sSwfPath": "/Content/TableTools/swf/copy_csv_xls_pdf.swf",
                "aButtons": [
                "sExtends": "collection",
                    "fnInit": function (node) 
                    formatTableToolsButton(node, 'ui-icon-print');
                ,
                    "sButtonText": "Download",

                    "aButtons": [
                    'sExtends': "csv",
                        'sButtonText': "Save as CSV",
                        'fnClick': function (nButton, oConfig, flash) 
                        customName = getCustomFileName() + ".csv";
                        flash.setFileName(customName);
                        this.fnSetText(flash, this.fnGetTableData(oConfig));
                    
                , 
                    'sExtends': "xls",
                        'sButtonText': "Export as Excel",
                        'fnClick': function (nButton, oConfig, flash) 
                        customName = getCustomFileName() + ".xls";
                        flash.setFileName(customName);
                        this.fnSetText(flash, this.fnGetTableData(oConfig));
                    
                , 
                    'sExtends': "pdf",
                        "fnClick": function (nButton, oConfig, flash) 
                        customName = getCustomFileName() + ".pdf";
                        flash.setFileName(customName);
                        this.fnSetText(flash,
                            "title:" + this.fnGetTitle(oConfig) + "\n" +
                            "message:" + oConfig.sPdfMessage + "\n" +
                            "colWidth:" + this.fnCalcColRatios(oConfig) + "\n" +
                            "orientation:" + oConfig.sPdfOrientation + "\n" +
                            "size:" + oConfig.sPdfSize + "\n" +
                            "--/TableToolsOpts--\n" + this.fnGetTableData(oConfig));
                    
                , 
                    'sExtends': "print",
                ],
            ],
        
    );
);

function formatTableToolsButton(node) 
    $(node).removeClass('DTTT_button');
    $(node).addClass('btn btn-primary btn-bar');

【问题讨论】：

请展示一下您的代码

@zlen 我已经编辑了我的问题 :)

嗯好的。 @Priya：您使用的数据表版本是什么？

我使用的是 1.10.4 的数据表版本

哦，好吧。是否添加了 tabletools.js 文件和 tabletools.css 文件？

【参考方案1】：

好的，所以在下面的示例中，我决定使用 Font Awesome。

然后，跟随documentation，你只需要从

"sButtonText": "Download",

收件人：

"sButtonText": "<i class='fa fa-bars'></i>", // Because you want the hamburger icon

你会得到this result（不明白为什么在jsfiddle上搜索失败）