如何用數據表中表格工具中的圖標替換按鈕？

我有一個下載按鈕，當點擊下載按鈕時，將顯示選項。但我必須用漢堡包圖標替換它。我怎樣才能做到這一點如何用數據表中表格工具中的圖標替換按鈕？

當我點擊漢堡包圖標，應該顯示的選項：

的下載按鈕必須改變，以漢堡包圖標

當我點擊按鈕，必須顯示選項

有沒有wa Ÿ實現這一目標？

這是我的數據表代碼：

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

來源

2015-08-20 Priya

請稍微顯示您的代碼 – Zl3n

@zlen我編輯了我的問題:) – Priya

euh ok。 @Priya：你使用的數據表的版本是什麼？ – Zl3n

好了，所以在下面的例子中，我決定使用字體真棒。

然後，繼documentation，你只需要改變從

"sButtonText": "Download",

要：

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

您將獲得this result（不明白爲什麼搜索再往上的jsfiddle）

來源

2015-08-20 13:44:41 Zl3n

如何用數據表中表格工具中的圖標替換按鈕？

回答

相關問題