DataTables, treeTable, and Searching

DataTables, treeTable, and Searching

edited September 2010 in General Posts: 7
Hey Everyone,

I'm using DataTables(DT) along side 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

<script type="text/javascript"> $(function () { $("#tree").dataTable({ "bSort": false }); $("#tree").treeTable(); $("#tree_filter").children("input").keyup(function () { $("tr").each(function () { $(this).show(); }); }); }); </script>
<table id="tree"> <thead> <tr id="node-0"> <th>DataTable</th> </tr> </thead> <tbody> <tr id="node-1"> <td>Parent</td> </tr> <tr id="node-2" class="child-of-node-1"> <td>Child</td> </tr> <tr id="node-3" class="child-of-node-2"> <td>Grand Child</td> </tr> <tr id="node-4"> <td>Parent</td> </tr> <tr id="node-5" class="child-of-node-4"> <td>Child</td> </tr> <tr id="node-6" class="child-of-node-4"> <td>Child</td> </tr> <tr id="node-7" class="child-of-node-6"> <td>Grand Child</td> </tr> </tbody> </table>


  • Posts: 22,729
    DataTables doesn't have a built in mechanism for allowing this at the moment. It treats each row individually, so it is not possible to group them. Hence, when considering the "child" rows, they are removed from the DOM because they don't match the filter.

    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.

  • Thanks for the response!

    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?
  • Posts: 22,729
    No - the removal of the DOM nodes is something that is "baked in" to DataTables - it would require a fair amount of work to change that behaviour I'm afraid.

  • edited September 2010 Posts: 7
    Thanks again for the response. I'm not giving up on using these 2 just yet! ^^ To get the functionality I'm looking for I think I'll write a script that adds in the text from the child elements into the parents in an invisible span. This way, if I disable the sorting, they should still maintain their structure. I hope it doesn't add in too much extra processing time. ^^
  • Posts: 22,729
    Yup that should work. Let us know how you get on!

This discussion has been closed.