Как заменить кнопку со значком в инструментах таблицы в таблице данных?

Question

У меня есть кнопка загрузки, и при нажатии кнопки загрузки будут отображаться параметры. Но я должен заменить это значком гамбургера. Как мне этого добиться

Когда я нажимаю значок гамбургера, должны отображаться параметры:

Кнопка загрузки должна быть изменена на значок гамбургера

Когда я нажимаю кнопку, должны отображаться параметры

Есть ли способ добиться этого?

Это мой код данных:

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

Answer 1

Итак, в следующем примере я решил использовать Font Awesome.

Затем, следуя документации, вам просто нужно изменить

"sButtonText": "Download",

Кому:

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

Вы получите этот результат (не понимаю, почему поиск не работает на jsfiddle)