如何用数据表中表格工具中的图标替换按钮？ [英] How to replace button with icon in table tools in data table?

问题描述

我有一个下载按钮，当点击下载按钮时，将显示选项。但我必须用汉堡包图标取代。如何实现

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

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

<

这是我的数据表代码：

 
 code> $（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 {
 formatTableToolsButton（node，'ui-icon-print'）; 
}，
sButtonText：Download，
 
aButtons：[{
'sExtends'：csv，
'sButtonText '：另存为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）+\\\
+ 
message：+ oConfig.sPdfMessage +\\\
 + 
colWidth：+ this.fnCalcColRatios（oConfig）+\\\
+ 
orientation：+ oConfig.sPdfOrientation +\\\
+ 
size： + oConfig.sPdfSize +\\\
+ 
 -  / TableToolsOpts  -  \\\
+ this.fnGetTableData（oConfig））; 
} 
}，{
'sExtends'：print，
}]，
}]，
} 
} 
}）; 
 
 function formatTableToolsButton（node）{
 $（node）.removeClass（'DTTT_button'）; 
 $（node）.addClass（'btn btn-primary btn-bar'）; 
} 
  

解决方案

例如，我决定使用Font Awesome。

然后，按照文档，您只需更改

 sButtonText： ，
  

To：

 sButtonText：< i class ='fa fa-bars'>< / i>，//因为你想要汉堡包图标
  

您将获得此结果< a>（不明白为什么搜索下去jsfiddle）

I have a download button and when the download button is clicked the options will be displayed. But I have to replace this with hamburger icon. How can I achieve that

When I click the hamburger icon, the options should be displayed :

The download button must be changed to hamburger icon

When I click the button, the options must be displayed

Is there any way to achieve this ?

This is my datatable code:

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

解决方案

Ok, so in the following example, I decided to use Font Awesome.

Then, following the documentation, you just have to change from

"sButtonText": "Download",

To :

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

You will get this result (don't understand why search go down on jsfiddle)

这篇关于如何用数据表中表格工具中的图标替换按钮？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！