JQuery Mobile, Datatables & AJAX loading

camryan

Hi,

I'm having issues with formatting when filling a table using ajax with Jquery Mobile.

Here's my HTML -

[code]


Here is a table



Col A
Col B
Col C





OK


[/code]

Here's the Javascript which is called when the page is displayed -
[code]

$('#tbl_schedule').dataTable( {
"aoColumns": [
null,
null,
null
],
"bProcessing": true,
"bDestroy": false,
"bRetrieve": true,
"bLengthChange": false,
"bInfo": false,
"bFilter": false,
"bJQueryUI": false,
"bSort" : false,
"bAutoWidth": true,
"fnDrawCallback": function() {
$('#schedule-dialog').trigger('create');
},
"sDom": 'lfrti',
"oLanguage": {
"sEmptyTable": ""
},
"sAjaxSource": '/php/get_json_data.php'
} );
[/code]

The resulting page looks like this -

[quote]
Here is a table
[OK button]
[Table]
[/quote]

The weird thing is that the table is *below* the OK button (but is above it in the HTML above). The resulting table has the correct content from the ajax results but the table width is also very thin.

Any suggestions? The page is formatted correctly if I use static (non-ajax) table content. I'm sure it is something to do with changing the DOM that JQM doesn't like...

thanks,
Cameron