jquery datatables-如何替换excel图标而不是按钮？

我想实现excel图标，而不是DataTable中excel导出选项的按钮。我已经放置了表工具参考，并试图实现导出excel表

如何使用excel图标代替按钮

是否可以设计excel表格标题和表格格式

如何将导出按钮移动到表格的右侧

请调查

var-oTable=$（“#products1”）.dataTable({
“aaData”：新数组，
“bProcessing”：正确，
“bDeferRender”：没错，
“bFilter”：错误，
“bRetrieve”：没错，
“bPaginate”：对，
“bJQueryUI”：没错，
“sPaginationType”：“两个按钮”，
“sDom”：“t”，
“可旋转工具”：{
“sSwfPath”：“./images/swf/copy\u csv\u xls\u pdf.swf”，
“阿布顿”：[
{
“性倾向”：“xls”，
“sFileName”：“*.xls”
}]
},
“bSort”：正确，
“aaSorting”：[[2，‘asc']]，
“iDisplayLength”：5，
“aoColumns”：[{“sWidth”：“135px”，“sClass”：“center”，“bSortable”：true}{
“sWidth”：“145px”，“sClass”：“center”，“bSortable”：true}{
“sWidth”：“20px”，“sClass”：“center”，“bSortable”：false}{
“sWidth”：“145px”，“sClass”：“center”，“bSortable”：false}
],
“aoColumnDefs”：[{“fnRender”：函数（o，val）{
返回o.aData[0]；
},
“sClass”：“，”aTargets:[0]
}, {
“fnRender”：函数（o，val）{
返回o.aData[1]；
},
“sClass”：“，”aTargets:[1]
}, {
“fnRender”：函数（o，val）{
返回o.aData[2]；
},
“sClass”：“Number”，“aTargets”：[2]
},{
“fnRender”：函数（o，val）{
返回o.aData[3]；
},
“sClass”：“描述”，“目标”：[3]
}]
});

1。）您可以

a） 使用jQueryUI在文本按钮旁边放置一个图标，如下所示 范例

b） 如文档所述，扩展插件并使用您自己的自定义按钮

2.）不，Excel按钮本质上是一个“作弊”按钮，它是一个附加了“.xls”的选项卡分隔文件。为此，您需要将数据表设置为服务器端而不是客户端（“bServerSide”：true），并将excel按钮设置为自定义按钮，以运行服务器端脚本，该脚本将查询/创建带有选项的excel

在医生准备好之前

TableTools.BUTTONS.download = {
    "sAction": "text",
    "sTag": "default",
    "sFieldBoundary": "",
    "sFieldSeperator": "\t",
    "sNewLine": "<br>",
    "sToolTip": "",
    "sButtonClass": "DTTT_button_text",
    "sButtonClassHover": "DTTT_button_text_hover",
    "sButtonText": "Download",
    "mColumns": "all",
    "bHeader": true,
    "bFooter": true,
    "sDiv": "",
    "fnMouseover": null,
    "fnMouseout": null,
    "sExtraData":[],
    "fnClick": function( nButton, oConfig ) {
    var oParams = this.s.dt.oApi._fnAjaxParameters( this.s.dt );
      //oParams = oParams.concat(oConfig.aExtraData);
      oParams.push({name: "bShowInactive", value: $("#bShowInactive").is(":checked") });    

    var iframe = document.createElement('iframe');
    iframe.style.height = "0px";
    iframe.style.width = "0px";
    iframe.src = oConfig.sUrl+"?"+$.param(oParams);
    document.body.appendChild( iframe );
    },
    "fnSelect": null,
    "fnComplete": null,
    "fnInit": null
};

然后coldfusion url使用SpreadsheetFormatRow将excel列加粗居中

3.）您可以使用css更改您的样式。类似这样的内容应该可以帮助您开始

div.DTTT_container {
position: relative;
float: right;
margin-bottom: 1em;
}

"oTableTools": {
          "aButtons": [ {
            "sExtends": "download",
            "sButtonText": "Download XLS",
            "sUrl": "index.cfm/reports:interact/downloadXLS",
            "sExtraData":[], //for static var passing
            "fnInit":   function(node){formatTableToolsButton(node, 'ui-icon-document');}
          }]
      }

div.DTTT_container {
position: relative;
float: right;
margin-bottom: 1em;
}