I am using datatables and wanted to represent hierarchical JSON data in a grid. I got the data to display hierarchically in the datatable through ajax, but I am having trouble with javascript implementing the expanding and collapsing of the rows.

Please take a look at this JSBin and try expanding and collapsing and you will see the issue:

The behavior should be like any hierarchical data (like the windows explorer):

1. When the grid loads, it should display first level rows with the expand icon.
2. When the top level expand button is clicked, it should open second level rows for the same parent with an expand button (if there are 3rd level rows).
3. When the second level expand button is clicked, it should open the third level rows.

Please take a look and suggest any JS changes. Please feel free to modify the fiddle.

Thanks.

I am using datatables and wanted to represent hierarchical JSON data in a grid. I got the data to display hierarchically in the datatable through ajax, but I am having trouble with javascript implementing the expanding and collapsing of the rows.

Please take a look at this JSBin and try expanding and collapsing and you will see the issue:

http://live.datatables/qedufunu/1/edit

The behavior should be like any hierarchical data (like the windows explorer):

1. When the grid loads, it should display first level rows with the expand icon.
2. When the top level expand button is clicked, it should open second level rows for the same parent with an expand button (if there are 3rd level rows).
3. When the second level expand button is clicked, it should open the third level rows.

Please take a look and suggest any JS changes. Please feel free to modify the fiddle.

Thanks.

• javascript
• jquery
• datatables

1 Answer 1

Okay. I fixed it myself. For folks who need a solution for nested rows in datatable, this should help immensely.

http://live.datatables/qedufunu/2/edit