DataTables, treeTable, and Searching
DataTables, treeTable, and Searching
Hey Everyone,
I'm using DataTables(DT) along side treeTable (http://plugins.jquery.com/project/treeTable) but I have a question regarding the search ability.
When DTs filters our results on keyup, it removes all the non-selected rows from the table. In the example below, if I search for "parent" the only results are both "Parent" lines. This prohibits me from expanding the parent lines because according to firebug, the children of this row doesn't actually exist. The reverse is also true, if I search for "grand" I'm only shown the "Grand Child" rows and firebug confirms that all the other rows have been removed.
Is there a way to have the "related" rows displayed if the search 'hits' any of the related elements? If datatables just turned the display on and off via css, I could probably figure it out myself but without the lements on the page, I'm totally lost!
Thanks a TON in advance! <3
John
JavaScript:
[code]
$(function () {
$("#tree").dataTable({
"bSort": false
});
$("#tree").treeTable();
$("#tree_filter").children("input").keyup(function () {
$("tr").each(function () {
$(this).show();
});
});
});
[/code]
HTML:
[code]
DataTable
Parent
Child
Grand Child
Parent
Child
Child
Grand Child
[/code]
I'm using DataTables(DT) along side treeTable (http://plugins.jquery.com/project/treeTable) but I have a question regarding the search ability.
When DTs filters our results on keyup, it removes all the non-selected rows from the table. In the example below, if I search for "parent" the only results are both "Parent" lines. This prohibits me from expanding the parent lines because according to firebug, the children of this row doesn't actually exist. The reverse is also true, if I search for "grand" I'm only shown the "Grand Child" rows and firebug confirms that all the other rows have been removed.
Is there a way to have the "related" rows displayed if the search 'hits' any of the related elements? If datatables just turned the display on and off via css, I could probably figure it out myself but without the lements on the page, I'm totally lost!
Thanks a TON in advance! <3
John
JavaScript:
[code]
$(function () {
$("#tree").dataTable({
"bSort": false
});
$("#tree").treeTable();
$("#tree_filter").children("input").keyup(function () {
$("tr").each(function () {
$(this).show();
});
});
});
[/code]
HTML:
[code]
DataTable
Parent
Child
Grand Child
Parent
Child
Child
Grand Child
[/code]
This discussion has been closed.
Replies
In order for this to work properly with DataTables there would need to be a significant alteration to how the filtering rows - allowing rows to be grouped. So sorry - the two plug-ins just weren't designed to interoperate like this.
Allan
Is there anyway to change the way DT removes the rows from the tables? So that instead of just being eliminated, they get the CSS attribute display:none?
Allan
Allan