jQuery DataTables: How to Use jQuery ThemeRoller CSS Styling on Your Table

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