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

Leave a Reply

You may use simple HTML to add links or lists to your comment. Also use <pre><code class="language-*">...</code></pre> to mark up code snippets. We support language-js, language-markup and language-css for comments.
(Optional)