DataTable Within a DataTable

Ancyent

Hi everyone,
I'm having some issues with my script

I have a data table ( server side proccessing )

for that everybody cand understand i will post my full html


[code]



Name
IP
MAC Address
Serial Number
Type
Description
Details













Name: ${name}
${serialNumber}
${cpuValue}
${os}
${ipValue}


empty
${ramValue}
empty




Timeline
Events
General Info
Configuration
Software
Network Shares
Notes
Documents






Name
Version
Installed
Product Key


















$(document).ready(function() {

// Start HOSTS
var oTable = $('#hosts').dataTable({
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "hosts_query.xsp",
"fnServerData": function ( sSource, aoData, fnCallback ) {
$.ajax( {
"dataType": 'json',
"type": "GET",
"url": sSource,
"data": aoData,
"success": fnCallback
} );
},
"aoColumns": [
{"mDataProp": "name"},
{"mDataProp": "ip"},
{"mDataProp": "macAddress"},
{"mDataProp": "serialNumber"},
{"mDataProp": "type"},
{"mDataProp": "description"},
{"mDataProp": "details"}
],
"sScrollX": "100%",
"sPaginationType": "full_numbers",
"bJQueryUI": true,
"bPaginate": true,
"bLengthChange": true,
"bFilter": true,
"bSort": true,
"bInfo": true,
"bAutoWidth": true
});
// END HOSTS

// Listen Event on image
$('#hosts tbody td img').live('click', function () {
var nTr = $(this).parents('tr')[0];
if ( oTable.fnIsOpen(nTr) )
{
/* This row is already open - close it */
this.src = "blueprint/images/wrap/details_open.png";
oTable.fnClose( nTr );
}
else
{
/* Open this row */
this.src = "blueprint/images/wrap/details_close.png";
var aData = oTable.fnGetData( nTr );
var ip = aData['ip'];
$.ajax({
url: 'details.xsp?ip='+ip,
async: false,
dataType: 'json',
success: function (data) {
oTable.fnOpen(nTr, $('#detailsTmpl').tmpl(data).appendTo("#detailsAppend"), "details");
}
});
/* End Ajax */

// Start Tabs
$('#tabs').tabs();
// End Tabs

// Start #softwareTable
$("#softwareTable").dataTable({

"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "ajax/hosts/software.xsp?ip="+ip,
"fnServerData": function ( sSource, aoData, fnCallback ) {
$.ajax({
"dataType": 'json',
"type": "GET",
"url": sSource,
"data": aoData,
"success": fnCallback
});
},
"aoColumns": [
{"mDataProp": "name"},
{"mDataProp": "version"},
{"mDataProp": "installed"},
{"mDataProp": "productKey"}
],
"sScrollY": 300,
"sScrollX": "100%",
"sPaginationType": "full_numbers",
"bJQueryUI": true,
"bPaginate": true,
"bLengthChange": true,
"bFilter": false,
"bSort": true,
"bInfo": false,
"bAutoWidth": false

});
// End #softwareTable

}
// End Else

});
// End listen Event in images

});


[/code]

my big problem is the fact that the second table dosen't display as it should.

Here is a image so that you understand.
http://oi50.tinypic.com/2ajpfeh.jpg

Ancyent

Or if someone can tell how to use multiple tables with diferent settings