jquery datatables - How to replace excel icon instead of button?

jquerydatatable

I want to implement the excel icon instead of button for excel export option in datatable.I have placed the tabletools reference and trying to implement the export excel sheet.

1 . How to use excel icon instead of button ?
2 . Is there Possibilities to design the excel sheet header and table format ?

3 . How to move the export button to right side of table ?


Please look into demo : http://jsfiddle.net/rwPFx/38/


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

});



[1]: http://jsfiddle.net/rwPFx/37/

allan

> 1 . How to use excel icon instead of button ?

If you have a look in the TableTools CSS file you'll see the styles needed to include an icon in the button: https://github.com/DataTables/TableTools/blob/master/media/css/TableTools.css#L119 . These are commented out by default, but can easily be commented back in.

Another potion is to use the sButtonText option, as you currently are, to add an `` tag - it will be rendered as HTML and the image displayed.

> 2 . Is there Possibilities to design the excel sheet header and table format ?


Currently, I'm sorry to say there is no option for that. The Excel export is really just a UTF16-LE CSV file, so there are no formatting options available. A future version of TableTools (possibly v3) will support XLSX file formats, but that's something that is on hold until after DataTables 1.10 ships.

> 3 . How to move the export button to right side of table ?


Add:

[code]
div.DTTT_container {
float: right;
}
[/code]

To your CSS.

Regards,
Allan