Second DataTables into Drill Down Row

blastor

Hi, i'm italian, sorry for my english...
I Can get a Indipendent Datatables into Drill Down Row?
I try to get this code but not work
[code]
function fnFormatDetails( oTable, nTr )
{
var oData = oTable.fnGetData( nTr );
var sOut =

''+
''+
'$(document).ready(function() {'+
'$(\'#the_table2\').dataTable();'+
'} );'+
''+
'';

alert(sOut);
return sOut;
}
[/code]
The alert show "$(document).ready(function() {$('#the_table2').dataTable();} );"
I think that right, but not work...anyone could help me?

allan

Yes - what to do is not inject a SCRIPT tag like you are doing, but rather to inject a TABLE tag (i.e. put the table you want to become a DataTable into the details row), and then initialise DataTables on that table (again i.e. not in the fnFormatDetails function but the function that calls it - once fnOpen has run and the table is in the DOM).

Allan

blastor

thanks, i put the table into function fnFormatDetails but i don't know how to initialise DataTable on the that table

this the function fnFormatDetails:
[code]
function fnFormatDetails( oTable, nTr )
{
var oData = oTable.fnGetData( nTr );
var sOut =

''+
''+
''+
''+
' ID Movimento'+
' ID Magazzino '+
' Data'+
' Autore'+
' Movimento'+
' '+
''+
''+
''+
'Loading data from server'+

''+
''+
''+
''+
' ID Movimento'+
' ID Magazzino '+
' Data'+
' Autore'+
' Movimento'+
' '+
''+
''+
'';
return sOut;
}
[/code]

e this is the function that calls it
[code]
$('#the_table td.control').live( 'click', function () {
var nTr = this.parentNode;
var i = $.inArray( nTr, anOpen );

if ( i === -1 ) {
$('img', this).attr( 'src', sImageUrl+"details_close.png" );
var nDetailsRow = oTable.fnOpen( nTr, fnFormatDetails(oTable, nTr), 'details' );
$('div.innerDetails', nDetailsRow).slideDown();
anOpen.push( nTr );
}
else {
$('img', this).attr( 'src', sImageUrl+"details_open.png" );
$('div.innerDetails', $(nTr).next()[0]).slideUp( function () {
oTable.fnClose( nTr );
anOpen.splice( i, 1 );
} );
}
} );
[/code]

should i initialize the new Datatables here and then pass it here?
( nTr, fnFormatDetails(NewoTableinitialize, nTr), 'details' );

blastor

all done!!
[code]
if ( i === -1 ) {
$('img', this).attr( 'src', sImageUrl+"details_close.png" );
var nDetailsRow = oTable.fnOpen( nTr, fnFormatDetails(oTable, nTr), 'details' );
$('div.innerDetails', nDetailsRow).slideDown();
anOpen.push( nTr );
oTable2=$('#the_table2').dataTable();
............
[/code]

i pass however oTable to the function fnFormatDetails to get the ID of the row... i need it for the query sql...thanks allan!
this datatables is great!!

gpang

Hi Allan, I tried to pass a current row element to the inner table initialization, something like

[code]
var oData = oTable.fnGetData( nTr );

var oTable2 = $('#example2').dataTable({
"bPaginate": false,
"bLengthChange": false,
....

"sAjaxSource" : "@{AController.action(oData.propertyOne)}"
[/code]

But the oData is null in the initialization, I got an error:

[quote]
Cannot get property 'propertyOne' on null object.
[/quote]

How can I pass a variable into the sAjaxSource variable for datatable initialization?

Thank you a lot.

gpang

I tried fnServerData, with the following code:

[code]
"fnServerData": function ( sAjaxSource, aoData, fnCallback ) {
aoData.push( { "name": "name", "value": oData.name } );
$.ajax( {
"dataType": 'json',
"type": "POST",
"url": sAjaxSource,
"data": aoData,
"success": fnCallback
} );

}
[/code]

Still nothing happened. I guess 'oData' is not available when initializing sAjaxSource, that's why I got an null object error. I was able to pass an constant value to sAjaxSource and got result, but no luck with oData.

Would somebody help on this? Any idea is much appreciated.

gpang

Got it working. "name" is a property name, should be argument name. Careless mistake! Thanks to Allan for such beautiful work.

allan

Heh - nice monologue :-). Great to hear you got it working. One point, it might be worth using fnServerParams and sServerMethod to set the extra data to send tot he server and use POST - it just sakes a few lines of code and keeps the DataTables Ajax call intact (it has error detection etc in it, so it can be useful).

Allan

gpang

Yes, I actually use fnServerParams, because I only need to provide the parameters. Thank you! It's so fun to use and explore this library.

gpang

I came across a strange issue. If I click to expand the row details top-down, only the first row has initialized table in the detail division. All the rest are table header only(table not initialized).

However, if I expand the row details bottom-up, all rows have their nested detail table initialized. Why? Thanks in advance!

gpang

Any thought or guess? I will appreciate that.