Toggle Show/Hide Rows With a Button
Toggle Show/Hide Rows With a Button
Hi all,
I'm looking into using DataTables but I wanted to make sure it can do what I want before I invest too much time into it. What I have is a three level hierarchy that needs to be able to expand and collapse. Each item also has some data to accompany it so this hierarchy is merely a column in a table. The way I assumed I would do this is have each item their own row, and when the expand/collapse button is pressed, the child rows would show/hide. Here is a rough visualization of what I want.
http://imgur.com/b20LP
Currently I'm denoting the difference in levels of the hierarchy by adding whitespace before the name, but that is not something set in stone if I happen to come across a better way of denoting a row's level.
After doing some research, I can see that one can select a row (http://datatables.net/release-datatables/examples/api/select_single_row.html) or show details for a row (http://datatables.net/blog/Drill-down_rows) or hide/show columns (http://datatables.net/release-datatables/examples/api/show_hide.html) (which is exactly what I want but with rows) and I have seen the fnOpen and fnClose functions but I don't want to have to pass the html for the row every time I call fnOpen. The optimum solution is to have all the data loaded in the table from the beginning and just have a button that toggles the visibility.
I feel like this should be possible but I can't seem to find anything in the API to help me do it. Suggestions?
Thanks everyone for your time.
I'm looking into using DataTables but I wanted to make sure it can do what I want before I invest too much time into it. What I have is a three level hierarchy that needs to be able to expand and collapse. Each item also has some data to accompany it so this hierarchy is merely a column in a table. The way I assumed I would do this is have each item their own row, and when the expand/collapse button is pressed, the child rows would show/hide. Here is a rough visualization of what I want.
http://imgur.com/b20LP
Currently I'm denoting the difference in levels of the hierarchy by adding whitespace before the name, but that is not something set in stone if I happen to come across a better way of denoting a row's level.
After doing some research, I can see that one can select a row (http://datatables.net/release-datatables/examples/api/select_single_row.html) or show details for a row (http://datatables.net/blog/Drill-down_rows) or hide/show columns (http://datatables.net/release-datatables/examples/api/show_hide.html) (which is exactly what I want but with rows) and I have seen the fnOpen and fnClose functions but I don't want to have to pass the html for the row every time I call fnOpen. The optimum solution is to have all the data loaded in the table from the beginning and just have a button that toggles the visibility.
I feel like this should be possible but I can't seem to find anything in the API to help me do it. Suggestions?
Thanks everyone for your time.
This discussion has been closed.
Replies
It is possible to do with the API and adding and removing rows, but currently I don't have an example of how it would be done, and it would require a bit of external coding since this isn't a feature that is built into DataTables core.
I'm planning look into building a plug-in / write a blog post about this collapsable ability in future, but as I say, I don't have an easy example for you to follow at the moment.
If you fancy giving it a bash, I'd suggest the way to do it is to use custom filtering, such that collapsed child rows are filtered out ( http://datatables.net/development/filtering ) by the table, but are still considered to be part of the table.
Allan