1

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

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

请看演示

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

});
4

1 回答 1

2

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 url使用SpreadsheetFormatRow将excel列加粗居中

3.）您可以使用 css 更改样式，这样应该可以帮助您入门

div.DTTT_container {
position: relative;
float: right;
margin-bottom: 1em;
}
于 2013-07-18T15:41:46.630 回答