ThemeRoller + TableTools compatibility

scotteby

First of all, Allan has done an amazing job with the DataTables plugin.

I added the TableTools plug-in to my site and noticed a minor issue with my ThemeRoller theme. The header/footer panels that wrap the table are no longer using the jquery ui theme.

I noticed the following div tag is now missing from my page:


Is there any way to fix this problem besides removing the TableTools plug-in? Thanks.

allan

Hi scotteby,

I'm guessing you have defined sDom to include TableTools in your layout. Which is the correct thing to do - but if you haven't defined it with the required jQuery UI theme classes, then you are going to have the issue that you are seeing.

sDom is actually set to

[code]
'<"fg-toolbar ui-widget-header ui-corner-tl ui-corner-tr ui-helper-clearfix"lfr>'+
't'+
'<"fg-toolbar ui-widget-header ui-corner-bl ui-corner-br ui-helper-clearfix"ip>';
[/code]
for theme roller support - so you will need to set the same, but with the 'T' for TableTools where ever you want it.

Regards,
Allan

scotteby

Thanks Allan. I didn't realize I had to include the theme roller code in the sDom. Works great now.

I'll have to buy you a beer this weekend! What are we drinking, Guinness?

-Scott.

allan

Hi Scott,

Yup - DataTables has two defined for the sDom parameter, and it switches which one will be used based on the bJQueryUI variable. This is done so as to maintain backward compatibility will all the stylings which don't use ThemeRoller. As with all things - easy when you know how :-)

Cider for me this weekend - off to the west country ;-)

Regards,
Allan

gavin

Hi Allan, I am pretty sure I have the same problem as Scotteby, but I am not sure how to fix it. Even after reading your comments, I am still lost. I wonder if anyone would mind clarifying the TableTools + Themeroller issue for me?

Here is an example of how I am using Tabletools:

http://btrbyt.com/shared/pages/datatables-tabletools-question.html

allan

Hi gavin,

Try this:

[code]
sDom: '<"H"lTfr>t<"F"ip>'
[/code]
( doc reference: http://datatables.net/usage/options#sDom )

Does that do what you are looking for? You might need to jiggle the floating elements in CSS a little bit :-)

Allan

gavin

Bingo, works great, thank you Allan.