jQuery DataTables: How to expand/collapse all child rows

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 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

You May Also Like

Comments

  1. 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'
    	})
    });
    
    1. 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'
         })
      });
      
  2. 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

  3. 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)
    
  4. 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 ?

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

  6. 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?

    1. 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.

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

    thanks,

  8. 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.

  9. 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!

    1. 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.

  10. 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

  11. 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.

Leave a Reply

(optional)

This site uses Akismet to reduce spam. Learn how your comment data is processed.