[英]How to replace button with icon in table tools in data table?
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. 好的,因此在下面的示例中,我决定使用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) 您将得到此结果 (不明白为什么搜索会落在jsfiddle上)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.