Search code examples
jquerycssdatatablestabletools

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 :

enter image description here

The download button must be changed to hamburger icon

enter image description here

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

  • 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)