Nested tables

euangreen

Is it possible to have another data table within a data table? In my mind I am trying to display a file/folder tree with folders being clicked on and providing a nested table with the folder contents.

I have seen jquery file manager examples that do this but was wondering if data tables can be tweaked to achieve something similar?

Regards,

Euan

allan

Hi Euan,

Yes, DataTables can nest tables, however, they are entirely independent from either other. So if you apply sorting to the outer table, it doesn't apply to the inner table etc - I'm sure that could be done using the API if you are looking for that, but the short answer is yes, nested tables should work fine in DataTables.

Allan

velo

is there an example of nested tables with ajax/server-side data being retrieved when the row is clicked?

allan

I don't have an example with DataTables inside another DataTables (although as I commented before it is perfectly possible) - however doing so would be a fairly simply extension of this blog post: http://datatables.net/blog/Drill-down_rows . Note that in the "details rows" it is actually using a table - so you just need to run DataTables over the inner table.

Allan

Wally

I am new to jQuery and Datatables, at what point do you need to run DataTables over the inner table?

I have tried doing it inside the live event of the root table right after the fnOpen but it does not work.

Wally

I does work inside the Live event. The problem was the sImageUrl in the sub table was not defined

nicolasrannou

Hi all,

I'm adding a table inside a row as suggested but I can not interact with the inner table:
If I put my cursor over the row containing the new table, the whole row is grayed out and I can not interact with the table inside...

Any suggestion to be able to interact with the inner table?

Thanks,
Nicolas

...
oTable.fnOpen( nTr, fnFormatDetails(oTable, data), 'detail' )
...

function fnFormatDetails ( oTable, data )
{
var numberOfResults = data.StudyInstanceUID.length;
var i = 0;
var content = 'UIDNb';

for(i = 0; i < numberOfResults; ++i)
{
content += '';
content += ''+data.SeriesInstanceUID[i][0]+'';
content += ''+data.NumberOfSeriesRelatedInstances[i][0]+'';
content += '';
}
content += '';

$('#'+data.StudyInstanceUID[0]+'').dataTable();

return content;
}
}

nicolasrannou

An example would be great if somebody already succeeded into it...

workteam123

I have looked (I think!) everywhere on your site and cannot find a working example of nested datatables - can anyone please help? I would very much like to use the drill down functionality with each nested table having drill down - Allan and others have suggested it is a simple extension of http://datatables.net/blog/Drill-down_rows and although everyone says it should be easy - 10 days later I am still struggling. Judging by the number of questions/requests for this around the web I feel I am not the only one having problems. - Many many thanks in advance

HorseBatteryStaple

I've got a working example I'm working on putting together to help everyone who had the same problems I did. It currently has company specific headers and data in it, so I want to strip all of this out for a cleaner example for everyone.

It uses an AJAX data source and returns JSON that I parse into the new inner-table. This inner table has a button on it too to allow the inner record to be deleted, also using AJAX. I use the jQuery .css() function to sync all of the columns to the header widths.

I'm using 6 of the same type of "row details" tables on one page. 5 of the tables have 5 columns and one has 4 columns of data. For the 5 tables with 5 columns, I was able to use some dynamic Javascript to format and handle creating the inner tables using a "parameter" of a sort to cut down on the amount of code I had to write. Of coruse for people with 5 different sized tables, this is not possible, but for me at least, it worked.

Give me a couple of hours and I'll post it up.

workteam123

Thanks HorseBatteryStaple

HorseBatteryStaple

Ok, I've put it in a jsFiddle thanks to Allan's suggestion. BTW Allan, thank you for all your hard work on this incredible suite of tools, and to the rest of the community that has put in time to make this what it is.

JSFiddle: http://jsfiddle.net/86nBA/5/

It could use more work of course, but hopefully this helps get the basic idea down. I left some old code in there so you could see how I make a request at least in a Java platform.

rafaelcichocki

Here link to my solution presented on StackOverflow, it's actually quite simple once you've understood Drill-Down-Rows:

http://stackoverflow.com/questions/11841486/datatables-drill-down-rows-with-nested-independent-table/12409660#12409660

JerryKur

Does anyone have a more complex example where the nested table is largely independent of the data and layout from the outer table. For example, if the outer table is an order with order level fields (ex. OrderID, Customer, etc.), the inner nested table would be an line item on the order (ex. Item #, quantity, prices, etc). I believe the inner table would need to be initialized and loaded after the fnOpen(). I tried this but am having some issues.

UPDATE. I have this working. Below is the code that works. Note the .parentNode usage. I am not sure why in one case the I can get the row data and in the fnOpen() I need to go up to the parent of the row.


[code]
$("#tblAssays").on("click", "tbody td img", function () {
var thisTR = this.parentNode.parentNode;
if (this.src.match(openImagePath)) {
//alert('show the child data');
// change icon to hide child data
this.src = closeImagePath;
// create the child order Detail table
var rowIndex = oAssayTable.fnGetPosition(thisTR)[0];
var aData = oAssayTable.fnGetData(rowIndex);
var orderDetailTableID = "OrderTable_" + aData.ID;

// Remove any older occurance of the table
$(orderDetailTableID).remove();

// Create and inject html for new occurance table
var orderDetailTableHTML = 'Order Details here';
var openedTR = oAssayTable.fnOpen(thisTR.parentNode, orderDetailTableHTML, 'OrderDetails');

// Initialize the table as a datatable
var oOrderDetailTable = $("#" + orderDetailTableID).dataTable(dtChildOrderDefault);

// load data into the datatable
oOrderDetailTable.fnAddData(aData.AssayGroupOrders);
}
else {
// alert('hide the child data');
// change icon to show child data
this.src = openImagePath;
oAssayTable.fnClose(thisTR.parentNode);
}
});
[/code]