How to get the jQuery UI ThemeRoller example working
How to get the jQuery UI ThemeRoller example working
ps008v009
Posts: 4Questions: 2Answers: 0
The "jQuery UI ThemeRoller" example at the URL below works nearly perfectly. The only quirk I see is that in Chrome 39 and IE 11, the drop shadow effect for the row sort icons is somewhat broken. (I did not test any other browsers.)
http://www.datatables.net/examples/styling/jqueryUI.html
I wanted to reproduce that same example on my PC, so I downloaded DataTables 1.10.4, and opened the jQueryUI.html example (DataTables-1.10.4\examples\styling\jqueryUI.html). However, under these conditions, the page is essentially unstyled. All backgrounds are white, buttons are plain text without any space between them, icons and gradient images are missing, etc.
As a workaround, I tried downloading the working example to my PC using File > Save As. This brought much improvement, but the icons and gradient images are still missing.
What am I missing, and how can I integrate it into this example on my PC? I would ideally like to know how to fix it in the examples directory from the DataTables 1.10.4 download.
Thank you!
P.S. After two days of use, I'm very impressed with DataTables. The documentation, features, and ease of use are far better than another popular table plugin for jQuery that I've been using.
Answers
Well, I figured out how to get the File > Save As version working. It was a matter of copying the image directories from the downloads for DataTables and jQueryUI to the correct relative paths.
I also found that omitting the LINK tag for site.css fixes the sort arrows by eliminating the overlay effect that was broken.
Yup - my site.css file (which you really don't want unless you want to copy the style of this entire site) contains the DataTables default CSS, which conflicts with the jQuery UI integration CSS - hence the issue.
For reference, this page int he manual describes how to integrate jQuery UI and DataTables.
Allan