sDom: add new button to standard toolbar

lbayle

Hi,
I would like to add a button right to the 'Filter' field. I try to use the custom toolbar API but this creates a new toolbar on top of the filter field. I want it to be on the same line.

here is my code:

jQuery('.datatable_custom').dataTable({
"sScrollY": "700px",
"bPaginate": false,
"bScrollCollapse": true,
"bFilter": true,
"bSort": true,
"bInfo": false,
"bAutoWidth": false,
"sDom": '<"H" <"toolbar">fr>t'
});
$("div.toolbar").html('<span style="margin-left: 1em;"><img src="images/b_export_xls.gif" title="{t}Export to CSV{/t}" /></span>');

The real purpose of this is that it seems that dataTable can only export to CSV using Flash. THis has been discussed many times in the forum, but your answer is always to do something on server side, which seems odd. Some very simple JS libraries can do the job (I'm using www.kunalbabre.com/projects/table2CSV.php), So i'd like to 'plug' it on dataTables.
But mabe I haven't found the right post in the forum ?

Thanks

lbayle

I finaly found how to do
it. here is my solution for a CSV button (without flash).

Note: this needs the followin lib: github.com/eligrey/FileSaver.js

jQuery('.datatable_custom').dataTable({
"sScrollY": "700px",
"bPaginate": false,
"bScrollCollapse": true,
"bFilter": true,
"bSort": true,
"bInfo": false,
"bAutoWidth": false,
"sDom": '<"H"Tfr>t',
"oTableTools": {
aButtons: [
{
sExtends: 'text',
sButtonText: 'export',
"sFieldSeperator": ";",
"sFieldBoundary": '"',
"mColumns": "visible",
fnClick: function (button, conf) {
var content = this.fnGetTableData(conf);
saveTextAs(content, 'datatable.csv');
}
}
]
}
});

mkleinosky

can you make a public live demo page/site - I think a lot of people (me) would like to export with need for SWF.

I make systems for developing country non-profits and any savings on bandwidth for loading stuff like flash is a BIG benefit

allan

Very nice - thanks for sharing this with us!

@mkleinosky - I'm going to be starting work on a replacement for TableTools in the next few weeks that doesn't require Flash.

Allan

lbayle

@mkleinosky: sory I have no public space for that, but I hope a similar solution will be soon included in datatables.

by the way, I have another question: Is there a way to set an image in the button instead of text ? I was hoping something like 'sButtonImage' but could not find anything similar.

allan

You can do it using the sButtonText option with an img tag, or probably better, use CSS. The default TableTools stylesheet contains commented out styles for this. The original TableTools release included these icons, but I removed them later on, but kept the CSS incase anyone might find it useful...!

Allan