jQuery DataTables plug-in has native support for child rows with row().child API methods. Child rows can be used to show extra details that do not fit into the main table. These rows are initially hidden and can be shown by clicking on expand/collapse control .
Child rows are also used by Responsive extension to display columns that do not fit the screen.
Solution depends on whether you use Responsive extension for your table powered by jQuery DataTables.
- Expand/collapse all child rows in a regular table
- Expand/collapse all child rows in a table with Responsive extension
Expand/collapse child rows in a regular table
There is an example on DataTables website demonstrating how to use child rows. I used it to show how to open all child rows in a regular table.
Expand/collapse child rows in a table with Responsive extension
Opening all child rows in a table with Responsive extension requires a different approach.
We need isolate rows that have child rows closed. These rows will not have
parent class. Then we need to trigger a click on the first cell of such row to force Responsive extension to expand a child row.