jQuery DataTables: How to Use jQuery ThemeRoller CSS Styling on Your Table CodeUnit 11 AUG 2010

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! :)

Related Posts:

About Craig Lotter

South African software architect and developer at Touchwork. Husband to a cupcake baker and father to two little girls. I don't have time for myself any more.

  • 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)

    • 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.

  • probably the simplest solution out there I was looking for that actually WORKS! thanks for this.