DataTables Inside jQueryUI Dialog

mahers

I'm trying to use a DataTables 1.8 inside a jQueryUI Dialog (version 1.8.16) both using the same theme. I can get the table to load inside the Dialog, but it doesn't appear to be displaying correctly - See example screenshot at http://i.imgur.com/DMTFO.png

CSS and JS Includes on the Page
[code]



















[/code]

Heres the HTML for the Dialog
[code]




ID
Timestamp
Hours
Comment






[/code]

JS Code
[code]
$(document).ready(function() {

var o = $( "#form-add-edit" ).dialog({
autoOpen: false,
modal: true,
buttons: {
Save: function() {
$.post("http://localhost/assetsci/assets/add_update_asset_hours",
$("#add-edit-hours").serialize(), function(data) {
alert(data);
$( this ).dialog( "close" );
});

//$( this ).dialog( "close" );
},
Cancel: function() {
$( this ).dialog( "close" );
}
}
});

$('#antenna_subs').dataTable({
"bPaginate": true,
"bLengthChange": true,
"bJQueryUI": true,
"bFilter": true,
"bSort": true,
"bInfo": true,
"bAutoWidth": false,
"sScrollY": "500px",
"sPaginationType": "full_numbers",
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "http://localhost/assetsci/assets/load_asset_list",
"aoColumns": [
null,
{ "bSearchable": false },
{ "bSearchable": false },
null,
null,
{ "bSearchable": false },
null,
null]
});


// this is the table being displayed
ohr_tbl = $('#hours').dataTable({
"bJQueryUI": true,
"bPaginate": false,
"bSort": false,
"bInfo": false,
"bFilter": false,
"aoColumns": [
{ "mDataProp": "av_id" },
{ "mDataProp": "av_timestamp" },
{ "mDataProp": "av_val" },
{ "mDataProp": "av_note" }
]
});

$("#hours tbody").click(function(event) {
$(ohr_tbl.fnSettings().aoData).each(function () {
$(this.nTr).removeClass('row_selected');
});

$(event.target.parentNode).addClass('row_selected');

if($(this).find('.row_selected').length == 1) {
var data = new Array();

$(event.target.parentNode).children('td').each(function() {
data.push($(this).html());
});

$("#av_id").val(data[0]);
$("#av_timestamp").val(data[1]);
$("#av_value").val(data[2]);
$("#av_note").val(data[3]);

o.dialog( "option" , "title" , "Edit Entry" );
o.dialog( "open" );
}
});

$( "#form-hours" ).dialog({
autoOpen: false,
maxHeight: 300,
//position: 'top',
height: 300,
width: 610,
modal: true,
buttons: {
"Add Entry": function() {

$("#av_id").val();
$("#av_timestamp").val();
$("#av_value").val();
$("#av_note").val();

o.dialog( "option" , "title" , "Add Entry" );
o.dialog( "open" );
},
"Delete Entry": function() {
var anSelected = fnGetSelected( ohr_tbl );
if(anSelected[0])
ohr_tbl.fnDeleteRow( anSelected[0] );
},
Cancel: function() {
$( this ).dialog( "close" );
}
},
close: function() {
;;//allFields.val( "" ).removeClass( "ui-state-error" );
},
open: function(event, ui) {

ohr_tbl.fnClearTable();
var asset_id = $(this).data('link').id;
$.getJSON('http://localhost/assetsci/assets/test/' + asset_id, function(data) {
if(data) {
ohr_tbl.fnAddData(data);
}
});

}

});

$('.hours').live('click',function() {
$( "#form-hours" ).data('link',this).position({
of: $("#hours"),
my: "center",
at: "center"}).
dialog( "open" );
});

$("#av_timestamp").live('click',function() {
$(this).datetimepicker({
dateFormat: 'dd/mm/yy',
onClose: function(dateText, inst) {
$(this).datetimepicker('destroy');
}
}).focus();
});

} );
[/code]

Is there something simple that I'm missing?