Replies

• allan Posts: 63,691Questions: 1Answers: 10,500 Site admin

  March 2010

  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 Posts: 11Questions: 0Answers: 0

  July 2011

  is there an example of nested tables with ajax/server-side data being retrieved when the row is clicked?
• allan Posts: 63,691Questions: 1Answers: 10,500 Site admin

  July 2011

  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 Posts: 2Questions: 0Answers: 0

  August 2012

  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 Posts: 2Questions: 0Answers: 0

  August 2012

  I does work inside the Live event. The problem was the sImageUrl in the sub table was not defined
• nicolasrannou Posts: 2Questions: 0Answers: 0

  August 2012

  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 Posts: 2Questions: 0Answers: 0

  August 2012

  An example would be great if somebody already succeeded into it...
• workteam123 Posts: 2Questions: 0Answers: 0

  August 2012 edited August 2012

  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 Posts: 3Questions: 0Answers: 0

  August 2012 edited August 2012

  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 Posts: 2Questions: 0Answers: 0

  August 2012

  Thanks HorseBatteryStaple
• HorseBatteryStaple Posts: 3Questions: 0Answers: 0

  August 2012 edited August 2012

  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 Posts: 1Questions: 0Answers: 0

  September 2012

  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 Posts: 5Questions: 0Answers: 0

  November 2012 edited November 2012

  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]