Button Issue with BjQueryUI

jnorris

Hi All,

I am looking at adding TableTools to the DataTables in an application I'm working on, but the jquery UI L&F only gets applied to the tables that are contained within a jquery ui tab. If the table is just on a page in a div then the original buttons with images appear. The behavior is consistent in all of the jsp pages containing a DataTable definition. All the tables are setup exactly the same in the initialization code other than the number of columns in the table and the datasource.

I'm using DataTables 1.8.0, TableTools 2.0.1, jQuery 1.6.1 and jQueryUI 1.8.13. TableTools is being added to the DataTables using "oTableTools":{} with the swf path and button definitions.

I can live with either L&F on the buttons but not both in the same application. Anyone have any suggestions?

Thanks,
Jim

jnorris

The other thing to note that the application is running in IE8 and the behavior is the same for all browser compatibility settings. I also tested in FF5 with the same results.

allan

Interesting one. Are you able to give us a link please, that would really help with identifying what the problem is? If you comment out TableTools does it work as expected? This example shows that it should be possible to have tables with jQuery UI theming inside other controls: http://datatables.net/release-datatables/examples/api/tabs_and_scrolling.html .

Allan

jnorris

Hi Allan,

My test app is behind our firewall so I can't provide a link. It is the data tools buttons that show up with the jquery ui L&F when the datatable is contained in a jquery ui tab and show up with the non jquery ui buttons when the datatable is in just a div in a form, so commenting out TableTools won't prove anything. This behavior is repeatable on several different JSP pages where everything else works including the button operation in both cases.

I'm going to create some straight html versions and see what the effect there is. I'll let you know what the results are.

Jim

jnorris

Hi Allan,

I created a simple html page with a two tab section at the top, one with a datatable with tabletools and a div below that containing a second datatable with tabletools. The datatools button in the one in the tab have the jqueryui L&F while the second one has the default button images. The flash buttons do not work though. I can zip that up and send it to you if you want. I don't see any way to upload a file in the forum ...

Jim

allan

My e-mail address is in the header at the top of the DataTables source file. I'd be interested to see what is happening, so yes please, do send the files over.

Allan

jnorris

Hi Allan,

I sent you the files as requested. BTW, the buttons also have the jquery ui L&F when the table is in an accordian.

Jim

allan

Hi Jim,

Excellent - thanks very much for the files - makes it much easier! It looks like it's just a CSS priority order in your specific set up. To get the jQuery UI styling on your "outer" table you can add the classes "ui-widget ui-widget-content" to the element with an id of "panel3". Another way would be to remove my CSS styles that you don't want :-)

Allan

jnorris

Thanks Allan,

I figured it must be something pretty simple but being mostly a back-end developer CSS is not my strong point so I didn't see anything obvious.

Jim

allan

I wouldn't have called that one obvious :-). I spotted it by looking at the CSS priority order in Webkit's Inspector (Firebug would work as well) - and also not being able to think of anything else that would explain it!

Allan