Widget styling is a long, laborious and tedious job for the most part, which is exactly why it is so great that the guys behind jQuery UI came up with the ThemeRoller concept which basically enforces a strict set of rules in terms of generic widget class styling.
As a bonus, the awesome jQuery DataTables plugin (which I religiously use on all my work-related HTML tables nowadays) comes with the option to enable jQuery ThemeRoller styling with a simple switch of an initialisation parameter!
To enable jQuery UI ThemeRoller support in your datatable, simply add the following option during construction:
$(document).ready( function() {
$('#example').dataTable( {
"bJQueryUI": true
} );
} );
And that is all there is to it. Make sure you include a ThemeRoller stylesheet link in your page and your nifty DataTables implementation should be using all those nifty ThemeRoller styling elements!
Nice! :)
Vik
Hello, i was trying to find how to enable the ThemeRoller on my table. I did what you said in the post, also included
@import “../examples_support/themes/smoothness/jquery-ui-1.8.4.custom.css”;
But it still doesnt work :( Can you help me with it (i am a total noob in this)
Craig Lotter
You enable the setting in your datatable declaration to “turn on” jQuery styling. As for the CSS, you simply add a bog standard CSS rule in your document head like you would for any other CSS file.
Vik
I made it work, thank you :)
Craig Lotter
Awesome :)
Christian Noel Reyes
probably the simplest solution out there I was looking for that actually WORKS! thanks for this.
Craig Lotter
No problemo!