jQuery DataTables: How to expand/collapse all child rows

January 12, 2018April 2, 2018 Michael Ryvkin

While answering questions on StackOverflow and DataTables forum I have seen a number of similar questions on how to open all child rows. Today I am going to demonstrate a couple solutions to this problem.

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

Solution

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 event on the first cell of such row to force Responsive extension to expand a child row.


table.rows(':not(.parent)').nodes().to$().find('td:first-child').trigger('click');

Example

Michael Ryvkin

Freelance web developer based in Perkasie, Bucks County, PA. I design and develop custom websites and web applications, perform website maintenance and provide technical support for small and medium-sized businesses.

Contact me for a free quote or consultation on your project.

Comments

Hi and thanks for your post! Is there a way to make it work with a single button and toggle the expand and collapse? Also using toggle button text like this?


$(".ExpandCollapseAll").click(function () {
	$(this).text(function(i, v){
	   return v === 'Expand All' ? 'Collapse All' : 'Expand All'
	})
});

I guess you could do something like shown below. Use code from the examples to expand/collapse child rows instead of // TODO: expand child rows and // TODO: collapse child rows.


$(".ExpandCollapseAll").click(function () {
    if($(this).text() === 'Expand All'){
       // TODO: expand child rows
    } else {
       // TODO: collapse child rows
    }

    $(this).text(function(i, v){
        return v === 'Expand All' ? 'Collapse All' : 'Expand All'
   })
});

CramAggy says:

March 19, 2018 at 11:02 pm

Thank you for your post. A lot of examples online demonstrate the show/hide child row data table several different methods. However, I was trying to accomplish this same thing on a SharePoint 2013 Online(SP 2013). The issue I have is the Hungarian variables and parameters that SP 2013 still uses. The second is I have yet to see a clear way to make this code work on SP2013 Online version. Have you had any experience accomplishing this within a SharePoint environment?

I should preference that I am learning as I go and I just started last year.

Thanks

Reply
Chijioke says:

March 30, 2018 at 3:34 pm

When a child expand or collapse, which is triggered?

Reply
jimmy says:

April 24, 2018 at 4:59 am

Hi Michael

Please tell me how to export the child row data following by parent data as it is viewing in the table.

https://jsfiddle.net/gyrocode/2u650u18/?utm_source=website&utm_medium=embed&utm_campaign=2u650u18

thanks
Jimmy

Reply
Mark McGown says:

May 29, 2018 at 2:07 pm
I’m trying to do something similar but it is collapsing everything when I use this. Could you help me figure out how to use js as-is to default hide everything but my label headers and open/close these tr’s with the +/- buttons?

Right now I have:
```
Header 1 
+
-




...
...



Header 2 
(repeat for N tables dynamically)
```
Reply
JavaDeveloper says:

May 31, 2018 at 11:31 am

Hi Michael,

Is there a way we can collapse all when sorting is changed?

Reply
1. Michael Ryvkin says:
  
  May 31, 2018 at 11:50 am
  
  You can handle order event and collapse/expand rows as needed.
  
  Reply
brian s sheldon says:

June 8, 2018 at 1:22 pm

Thanks! This really helped me…

Reply
jimmy says:

September 20, 2018 at 11:02 am

Hi, Is there a Way I can move the (expand) + sign to 2nd table header
& Also show the expand and Collapse button only when decreasing the width ?

Reply
1. Michael Ryvkin says:
  
  September 21, 2018 at 6:21 am
  
  If you only want to show (+) sign when you decrease table size, you need to use Responsive extension instead. See this example on how to display (+) sign in its own column. You need to change targets: 0 to targets: 1 to use second column.
  
  Reply
Gary says:

November 7, 2018 at 7:21 pm

$(table.table().node()).find(“tr:not(.parent)>td:first-child”).trigger(“click”); – curious which is faster

Reply
1. Michael Ryvkin says:
  
  November 7, 2018 at 7:47 pm
  
  I believe your code will only work for visible rows only.
  
  Reply
XiaoJie He says:

February 25, 2019 at 2:18 am

I made the expansion and folding with child.show(), but I don’t know how to dynamically give the child row data. How can I dynamically give the child row data?

Reply
1. Michael Ryvkin says:
  
  February 26, 2019 at 8:32 pm
  
  Just modify format() function and render content of the child row based on row data provided in d variable.
  
  Reply
DP says:

March 1, 2019 at 1:00 am

Hi, This example possible with spring boot?

Reply
Kaushik says:

March 13, 2019 at 9:56 am

Michael, is it possible to have 3 level of child?

Reply
1. Michael Ryvkin says:
  
  March 13, 2019 at 10:19 am
  
  Theoretically it is possible if you initialize the table in the child row and apply the same method to display row details for child row. From usability standpoint this may be not the best solution for many reasons: confusing appearance and problems with smaller screen devices.
  
  Reply
matt says:

March 26, 2019 at 12:18 am

Hi Michael,
When responsive is set it doesn’t seem to expand all rows of all pages, just the current page.

Reply
1. Michael Ryvkin says:
  
  March 29, 2019 at 2:11 pm
  
  You’re right. Let me think on the way to expand all rows on all pages in this case.
  
  Reply
Luis G says:

March 29, 2019 at 2:09 pm

Michael, is there a way to expand all but wihout using a button? Instead just when document is ready?

thanks,

Reply
1. Michael Ryvkin says:
  
  March 29, 2019 at 2:13 pm
  
  Just use corresponding code to expand child rows in your handler defined using initComplete option.
  
  Reply
John says:

April 4, 2019 at 4:47 pm

Michael,

Is there a way to set it so I can have only 1 item expanded at a time?

Currently if I click on the “+” sign of 1 item and another “+” sign from another item, they both stay expanded.

Should be click on the “+” sign of 1 item and when clicking on the other “+” sign, the orignal one expanded becomes collapsed.

Reply
Francisco says:

June 3, 2019 at 7:17 am

Thanks! Thanks! Thanks! and Thanks!
This really helped me.

Reply
Claire says:

July 9, 2019 at 9:49 am
Hello! Somehow, I can expand and collapse all child rows but only with the code for expanding the child rows somehow :
```
table.rows(':not(.parent)').nodes().to$().find('td.details-control').trigger('click');
```
Also, If I open one child row and I click the expand button, that one child row collapses, so it does the opposite of what’s it’s supposed to do.

I’d appreciate any help!
Reply
1. Michael Ryvkin says:
  
  July 10, 2019 at 5:36 pm
  
  The code you’ve mentioned only works as intended with Responsive extension which assigns class parent to collapsed rows. If you’re not using Responsive extension, consider using the code to expand/collapse rows listed in Expand/collapse child rows in a regular table section.
  
  Reply
petrus says:

August 2, 2019 at 3:13 am

Hi, can you tell me how much field can show in table? i have much 17 fields want to show in the table, but datatables can’t work to search any data in table. Help me please..

thanks

Reply

Hi, there is another way. You don’t need to fire click event and than wait for bubbling. It can be done direcly.


$('#example').DataTable().rows('.shown').every(function (rowIdx,tableLoop,rowLoop){
     if (this.child.isShown()) // redundant, already selected those that have child via that class selector
         this.child.remove(); // or row.child.hide(); if you don't want to delete it from DOM
     this.node().to$().removeClass('shown');
 });
// $('#example .shown').removeClass('shown');

PS: I did not test it in your exact setup, hopefully I adapted it enough from my solution…
PSS: I know nothing about that Responsive extension, but it could work too.

sunil says:

June 19, 2020 at 9:16 am

how I can expand and collapse child from coloumn 2nd last

Reply
1. Michael Ryvkin says:
  
  June 23, 2020 at 7:18 am
  
  Can you please explain your question? If you mean that you want to place expand button in the column other than first, then see this example for a solution.
  
  Reply