Question

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

当我点击汉堡包图标时，应显示以下选项：

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

单击按钮时，必须显示选项

有没有办法实现这个目标？

这是我的数据表代码：

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

Answer 1

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

然后，在documentation之后，你只需要改变

"sButtonText": "Download",

致：

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

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

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

1 个答案: