问题
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');
}
回答1:
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)
来源:https://stackoverflow.com/questions/32118899/how-to-replace-button-with-icon-in-table-tools-in-data-table