Using TreeTable With DataTables For Parent-Child Relationships
Using TreeTable With DataTables For Parent-Child Relationships
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!
[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!
This discussion has been closed.
Replies
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
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