Idiots Guide To Applying Jquery Themes

crea2k

Hi, are there any guides on how to apply ui-darkness theme ?, im really new to jquery and it confuses the hell out of me. I have downloaded an example and changed the code in the head to look like this
"bJQueryUI": true,
"sDom": "frtip",
"iDisplayLength": 10,
"sPaginationType": "full_numbers",
"bStateSave": true

I have also downloaded the ui-darkness theme but have no idea where to put it in the directory, what files to use where or anything like that, I need a how to guide lol.

crea2k

It would be good to have an example download for this page >> http://datatables.net/styling/themes/ui-darkness

John Archer

Hi!

Well, basically you just should include jquery.js. jquery.ui-custom.js and the darktheme css. You should consider reading the jQuery UI doc, as this has not much to do with DataTables (besides "bJQueryUI": true :-D).

Regards

crea2k

I have the following, but still have a blank page :
[code]




[/code]

AND

[code]

@import "ui/media/css/themes/ui-darkness/jquery-ui-1.8.16.custom.css";

[/code]

AND

[code]

var oTable = $('#example').dataTable( {
"bJQueryUI": true,
"sDom": "frtip",
"iDisplayLength": 10,
"sPaginationType": "full_numbers",
"bStateSave": true
});

function fil(rexp)
{
$('#example').dataTable().fnFilter(rexp, 0, true, false);
}


[/code]
Inside the head tag.

In the body I have a table with the id="example" and some data in that, when it loads the datatable seems to load just fine and the functions work, but its just white, no styling at all ?.

crea2k

Ahh success, the idiot has got it working lol, turns out I was using the wrong code in the head, it should have been [code]$(document).ready( function() {
$('#example').dataTable( {
"bJQueryUI": true
} );
} );[/code] Dont know if I had something from the example conflicting ?

John Archer

:-) Good to see.

Yeah, the DOM has to be ready first to get the jQuery UI stuff applied.