HOW TO: use table tools with themeroller

stevek

hi guys,
excellent UI! does so many wonderful things! (how 'bout pdf exporting, hint hint!)
anyway,
i'd like to ask: how do i get the table tools to work with the themeroller? my code looks like this:

$('#mycases').dataTable({
"bAutoWidth": false,
"bJQueryUI": true,
"bProcessing": true,
"sPaginationType": "full_numbers"
});

and my table get's rendered with the beautiful css skin i generated from jQuery. now in my code, if i add the following line -

"sDom": 'T<"clear">lfrtip'

i lose all my css skins/colors! please help!
thanks.

stevek

anyone? pls help!

allan

As the documentation notes ( http://datatables.net/usage/options#sDom ), sDom is '<"H"lfr>t<"F"ip>' in order to support jQuery UI. So you just need to set that and add the 'T' option for where you want to add it. TableTools itself is not styled by jQuery UI, but it would be easy to modify the CSS a little to have it fit in a bit more.

Regarding pdf export in TableTools - certainly an option for future :-)

Regards,
Allan

Solburn

I've followed the directions here and everything works except I don't know how to "add the 'T' option for where you want to add it".

Can you point me in the right direction on how to do this?

Thanks!

TomC

H and F represent the classes used to make your Header or Footer respectively style by jQuery UI. The t represents where the table goes.

I use:
'<"H"lif>rt<"F"p>'
This says:
div with Header classes which contains Length changer, Information then Filter then insert the processing div(r) followed by the Table then a div with the Footer classes that contains Pagination controls.

Solburn

@TomC thank you for your reply it was extremely helpful and helped my resolve my issue. Now I actually understand what all of those letters mean.

Here's a code example for anyone that needs it:

[code]
$(document).ready(function() {
/* You might need to set the sSwfPath! Something like:
* TableToolsInit.sSwfPath = "/media/swf/ZeroClipboard.swf";
*/

TableToolsInit.sSwfPath = "DataTables/TableTools/media/swf/ZeroClipboard.swf";

var oTable = $('#tblOscarNominees').dataTable({
// "sDom": '<"H"lfr>t<"F"ip>', // this is the standard setting for use with jQueryUi, no TableTool
// "sDom": '<"H"lfrT>t<"F"ip>', // this adds TableTool in the center of the header
// "sDom": '<"H"lfr>t<"F"ip>T', // this adds TableTool after the footer
"sDom": '<"H"lfrT>t<"F"ip>T', // this adds TableTool in the center of the header and after the footer
"oLanguage": { "sSearch": "Search the Features:" },
"iDisplayLength": 25,
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"aaSorting": [[0, "asc"]],
"bProcessing": true,
"aoColumns": [
/* 1st column hidden*/{"bVisible": false },
/* show 2nd column */null,
/* show 3rd column*/null,
/* show 4th column*/null
]
});

// new FixedHeader(oTable); // uncomment this if you want a fixed header, don't forget to reference the "FixedHeader.js" file.
});
[/code]