gpt4 book ai didi

jquery - 如何将数据表中表格工具中的按钮替换为图标?

转载 作者:行者123 更新时间:2023-12-01 02:53:53 27 4
gpt4 key购买 nike

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

当我单击汉堡包图标时,应显示选项:

enter image description here

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

enter image description here

当我单击按钮时,必须显示选项

有什么办法可以实现这一点吗?

这是我的数据表代码:

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

最佳答案

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

然后,按照documentation ,您只需更改为

"sButtonText": "Download",

致:

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

您将得到this result (不明白为什么 jsfiddle 上的搜索会下降)

关于jquery - 如何将数据表中表格工具中的按钮替换为图标?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32118899/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com