jquery datatables - 버튼 대신 Excel 아이콘을 바꾸는 방법은 무엇입니까?

데이터 테이블에서 excel 내보내기 옵션의 버튼 대신 Excel 아이콘을 구현하고 싶습니다. 타블렛 참조를 배치하고 내보내기 엑셀 시트를 구현하려고했습니다.jquery datatables - 버튼 대신 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] 
    }] 

});

출처

2013-07-16 user2535783

1로 봐주세요 할 수 있습니다 중 하나

a)이 예 http://iksela.tumblr.com/post/2727627360/display-tabletools-buttons-as-jqueryui-buttons-with-an

나처럼 텍스트 버튼 옆에 아이콘을 넣어 JQuery와 UI를 사용) 설명서를 설명 할 때 플러그인을 확장하고 사용자 정의 단추를 사용하십시오. 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 
};

datatables는

"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를 사용하는 기능에

3.) CSS를 사용하여 스타일을 바꿀 수 있습니다. 시작하면된다.

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

출처

2013-07-18 15:41:46

jquery datatables - 버튼 대신 Excel 아이콘을 바꾸는 방법은 무엇입니까?

답변

관련 문제