Question

我想在datatable中为excel导出选项实现excel图标而不是按钮。我已经放置了tabletools引用并尝试实现export excel表。

1。如何使用excel图标而不是按钮？ 2。是否有可能设计excel表格标题和表格格式？
3。如何将导出按钮移动到表格的右侧？

请查看Demo

var oTable = $("#products1").dataTable({
       "aaData": newarray,
       "bProcessing": true,
       "bDeferRender": true,
       "bFilter": false,
       "bRetrieve": true,
       "bPaginate": true,
       "bJQueryUI": true,
       "sPaginationType": "two_button",
      "sDom": '<"H"Tfr>t<"F"ip>',
       "oTableTools": {
            "sSwfPath": "../images/swf/copy_csv_xls_pdf.swf",
             "aButtons": [ 
             {
                "sExtends": "xls",
                "sFileName": "*.xls"
             }]
        },
       "bSort": true,
       "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": function (o, val) {
            return o.aData[0];
        },
            "sClass": "","aTargets": [0]
    }, {
        "fnRender": function (o, val) {

            return o.aData[1];
        },
            "sClass": "","aTargets": [1]
    }, {
    "fnRender": function (o, val) {

            return o.aData[2];
        },
            "sClass": "Number","aTargets": [2]
    },{
    "fnRender": function (o, val) {

            return o.aData[3];
        },
            "sClass": "Description","aTargets": [3]
    }]

});

Answer 1

1。）你可以

a）使用jquery ui在文本按钮旁边放一个图标，如下所示例如http://iksela.tumblr.com/post/2727627360/display-tabletools-buttons-as-jqueryui-buttons-with-an

b）扩展插件并使用您自己的自定义按钮，因为文档描述了http://datatables.net/extras/tabletools/button_options

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
};

数据表函数中的

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

然后，coldfusion网址使用SpreadsheetFormatRow以粗体为中心显示excel列

3。）你可以使用css改变你的风格，这应该是你开始的

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

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

1 个答案: