I want create two linked datatables

reego15

In my first datable, when i click on a line, i display a second datatable who have the first row's cell value on parameter.
The problem is it' s working the first time but after when i click in the row of the first datatable, firebug say me oTable null
When the second datatable is working, the first are not active ?
Thank you

allan

Hi reego15,

Interesting application of DataTables - I like the idea :-). I'm not entirely sure why you would run into the problem you describe. Do you have a link you could provide?

Thanks,
Allan

joash

Hi all..
I also want to do like this. The example idea is: when I want to know all transaction in my shop, and if I want to look at historical/record of the mostly purchase at 1 person, I can click at the name and new datatables will opened like hidden row information.
Is it possible?

Thanks,
Joash

allan

Yes this is possible - something like this: http://datatables.net/examples/api/row_details.html

Allan

joash

Sounds good.. but have you had a sample for that? it makes me confuse..
Thanks

allan

I'm slightly confused myself as well :-). This is the sample: http://datatables.net/examples/api/row_details.html

If you click on the little plus button then it will 'open' the row (showing extra information), then click the minus button and it will close the details row. Is that not what you are looking for?

Allan

joash

Hi Allan,
Not like that :) I've done with that sample from Examples page, but I want to modify it.
When I click on the little plus button then it will open the row, but not showing extra information. It will show new datatables (e.g. if I want to look the detail transaction of that person at the record of total purchase). And if minus button clicked, it will close that new datatables.
Essentially is how to create datatables into datatables.

Thank you,
Joash

allan

So it will open a new DataTable inside the 'details row'? Okay, that's readily do-able. The key thing to do is to make a change to fnFormatDetails() such that it will create a table which can be used as a DataTable (so thead, tbody etc). If you've got the table you want showing in the details row - then that's most of the battle :-)

The next thing to do is to initialise the new DataTable. In my example this could be done something like this:

[code]
var nDetailsRow = oTable.fnOpen( nTr, fnFormatDetails(oTable, nTr), 'details' );
$('table', nDetailsRow).dataTable();
[/code]
Allan

joash

Yes, that rights.. but is it not overlapping for 2 tables (the tags)? I only need call 1 datatables.js?

Thank you,
Joash

allan

How do you mean not overlapping? Are you using something like fnFormatDetails() to create the table you want to make into a 'sub' DataTable? As long as it returns a string like "column..." then it should work fine. And yes, you only need to include the JS file once.

Allan

joash

I've try to create it but not working.. maybe my fault is in initialize new DataTable like your mention above. Sorry, because I'm not expert in javascript :(. Could you review my script below?

"[code]
function fnFormatDetails ( oTable, nTr )
{
var aData = oTable.fnGetData( nTr );
var sOut = '';
sOut += 'Data1Data2';
sOut += 'randy500';
sOut += 'richard300';
sOut += '';
return sOut;
}

$(document).ready(function() {
var nCloneTh = document.createElement( 'th' );
var nCloneTd = document.createElement( 'td' );
nCloneTd.innerHTML = '';
nCloneTd.className = "center";

$('#example thead tr').each( function () {
this.insertBefore( nCloneTh, this.childNodes[0] );
} );

$('#example tbody tr').each( function () {
this.insertBefore( nCloneTd.cloneNode( true ), this.childNodes[0] );
} );

var oTable = $('#example').dataTable();

var nDetailsRow = oTable.fnOpen( nTr, fnFormatDetails(oTable, nTr), '#detail_table' );
$('#example', nDetailsRow).dataTable();


$('td img', oTable.fnGetNodes() ).each( function () {
$(this).click( function () {
var nTr = this.parentNode.parentNode;
if ( this.src.match('details_close') )
{
this.src = "dataTables-1.7/examples/examples_support/details_open.png";
oTable.fnClose( nTr );
}
else
{
this.src = "dataTables-1.7/examples/examples_support/details_close.png";
oTable.fnOpen( nTr, fnFormatDetails(oTable, nTr), 'details' );
}
} );
} );
} );
[/code]"

for data, I use mysql data with query to replace that static data.

Thank you,
Joash

allan

It looks close - try this instead:

[code]

function fnFormatDetails ( oTable, nTr )
{
var aData = oTable.fnGetData( nTr );
var sOut = '';
sOut += 'Data1Data2';
sOut += 'randy500';
sOut += 'richard300';
sOut += '';
return sOut;
}

$(document).ready(function() {
var nCloneTh = document.createElement( 'th' );
var nCloneTd = document.createElement( 'td' );
nCloneTd.innerHTML = '';
nCloneTd.className = "center";

$('#example thead tr').each( function () {
this.insertBefore( nCloneTh, this.childNodes[0] );
} );

$('#example tbody tr').each( function () {
this.insertBefore( nCloneTd.cloneNode( true ), this.childNodes[0] );
} );

var oTable = $('#example').dataTable();




$('td img', oTable.fnGetNodes() ).each( function () {
$(this).click( function () {
var nTr = this.parentNode.parentNode;
if ( this.src.match('details_close') )
{
this.src = "dataTables-1.7/examples/examples_support/details_open.png";
oTable.fnClose( nTr );
}
else
{
this.src = "dataTables-1.7/examples/examples_support/details_close.png";
var nDetailsRow = oTable.fnOpen( nTr, fnFormatDetails(oTable, nTr), 'details' );
$('table', nDetailsRow).dataTable();
}
} );
} );
} );
[/code]
note where I've moved and modified the initialisation of the inner table.

Allan

joash

Great... it works... very cool...
Thank you Allan, now I will try to modify the detail table so can sort any column :)

Thank you,
Joash