Using TreeTable With DataTables For Parent-Child Relationships

Joyrex

We're trying to implement the TreeTable plugin (http://ludo.cubicphuse.nl/jquery-plugins/treeTable/doc/index.html) with DataTables, and so far, it does work - however, it's behavior is inconsistent - sometimes the TreeTable plugin will work, other times it won't (and will render the child rows visible). Sorting also breaks it (expected, since the way the TreeTable plugin works is based on IDs assigned to the rows), and we'd really like to use these two great plugins together, but try and improve the consistency, which we think is due to how we have the two integrated. Below is our code - hopefully someone can offer a suggestion as to what we're doing wrong, or perhaps a better method of doing what we want:
[code]$(document).ready( function() {
$("#Matters1").treeTable(
{
clickableNodeNames: false,
indent: 19
});
});

$('.actionlink').each(function() {
var $dialog = $('');
var $link = $(this).one('click', function() {
$dialog
.load($link.attr('href') + ' #modalWrapper')
.dialog({
resizable: false,
modal: true,
//autoOpen: false,
title: 'Action Items',
width: 700,
height: 'auto',
buttons: {
"Close": function() {
$(this).dialog("close");
}
}
});

$link.click(function() {
$dialog.dialog('open');

return false;
});
return false;
});
});



$('#Matters1').dataTable( {
//"sScrollY": "400px",
//"bScrollCollapse": false,
"sPaginationType": "full_numbers",
"bSort": true,
//"iDisplayLength": 10,
"bStateSave": true,
"bLengthChange": false
} );
[/code]

As you can see, we're also implementing a modal window as well, but removing that doesn't seem to make a difference in whether the TreeTable/DataTable works or not. The table output is rendering the node IDs correctly for the TreeTable to function, so we're at a loss as to why it's behaving so inconsistently. Any advice is appreciated!

allan

I rather suspect that this will not be a trivial integration and if you want Tree like abilities a plug-in which is specifically designed for DataTables would need to be created.

The reason I say that is because of the way the DataTables draw works. Whenever you draw the table it will remove all nodes from the tbody, and then insert the TR elements for the nodes it needs to display (based on filtering, sorting etc). So if TreeTable inserts any nodes that DataTables isn't aware of (an in a different order from what DataTables expects) it is going to go belly up - which is what I suspect you are seeing.

Sorry I don't have better news!

Allan

Joyrex

Allan,

Gah - I was hoping for a magical solution like most JQuery provides! :)

TreeTable requires you to manually set the node IDs so it can do it's magic, so perhaps the removal of all the nodes is what's happening?

What about nesting a DataTable inside the show/hide details addon for DataTables? Is that possible?

allan

You can nest a DataTable inside the cell of another DataTable no problem at all, including in the show/hide options - you just need to initialise them as required. However they are independent tables - ie filtering is applied individually, sorting as well. Columns wouldn't align either. It might be lossible to write scripts to help, but it wouldn't be as good as a proper plugin offering that a solution to the problem.

Allan