Datatable Collapsible RowGroup with checkboxes

Question

I am not very familiar with datatables. In fact, I have just been learning out to use it for the past couple of weeks. I have a requirement to develop a datatable with collapsible\expandable rowgroups with checkboxes.

The following example achieves what I need except rowgroups (or headers showing the total number of lines under each city) are not collapsible\expandable.

https://jsfiddle.net/gyrocode/2b0revo8/

$(document).ready(function (){
   var table = $('#example').DataTable({
      'ajax': 'https://gyrocode.github.io/files/jquery-datatables/objects.json',
      'orderFixed': [3, 'asc'],
      'rowGroup': {
         'dataSrc': 'office',
         'startRender': function(rows, group) {
            // Assign class name to all child rows
            var groupName = 'group-' + group.replace(/[^A-Za-z0-9]/g, '');
            var rowNodes = rows.nodes();
            rowNodes.to$().addClass(groupName);
            
            // Get selected checkboxes
            var checkboxesSelected = $('.dt-checkboxes:checked', rowNodes);
            
            // Parent checkbox is selected when all child checkboxes are selected
            var isSelected = (checkboxesSelected.length == rowNodes.length);
            
            return '<label><input type="checkbox" class="group-checkbox" data-group-name="' 
                   + groupName + '"' + (isSelected ? ' checked' : '') +'> ' + group + ' (' + rows.count() + ')</label>';
         }         
      },
      'columns': [
         {
            'data': 'id',
            'checkboxes': {
               'selectRow': true
            }
         },
         { 'data': 'name' },
         { 'data': 'position' },
         { 'data': 'office' },
         { 'data': 'salary' }
      ],
      'select': {
         'style': 'multi'
      },
      'order': [[2, 'asc']]
   } );
     
   // Handle click event on group checkbox
   $('#example').on('click', '.group-checkbox', function(e){
      // Get group class name
      var groupName = $(this).data('group-name');
      
      // Select all child rows
      table.cells('tr.' + groupName, 0).checkboxes.select(this.checked);
   });

   // Handle click event on "Select all" checkbox
   $('#example').on('click', 'thead .dt-checkboxes-select-all', function(e){
      var $selectAll = $('input[type="checkbox"]', this);      
      setTimeout(function(){
         // Select group checkbox based on "Select all" checkbox state
         $('.group-checkbox').prop('checked', $selectAll.prop('checked'));
      }, 0);
   });     

} );         

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/v/dt/dt-1.10.16/rg-1.0.2/sl-1.2.4/datatables.min.js"></script>
<script src="https://gyrocode.github.io/jquery-datatables-checkboxes/1.2.9/js/dataTables.checkboxes.min.js"></script>
<link href="https://gyrocode.github.io/jquery-datatables-checkboxes/1.2.9/css/dataTables.checkboxes.css" rel="stylesheet"/>

<link href="https://cdn.datatables.net/v/dt/dt-1.10.16/rg-1.0.2/sl-1.2.4/datatables.min.css" rel="stylesheet"/>
<h3><a target="_blank" href="https://www.gyrocode.com/projects/jquery-datatables-checkboxes/">jQuery DataTables Checkboxes:</a> <a target="_blank" href="https://www.gyrocode.com/projects/jquery-datatables-checkboxes/examples/integration/rowgroup/">RowGroup</a></h3>
    
<table id="example" class="display" cellspacing="0" width="100%">
   <thead>
      <tr>
         <th></th>
         <th>Name</th>
         <th>Position</th>
         <th>Office</th>
         <th>Salary</th>
      </tr>
   </thead>
   <tfoot>
      <tr>
         <th></th>        
         <th>Name</th>
         <th>Position</th>
         <th>Office</th>
         <th>Salary</th>
      </tr>
   </tfoot>
</table>

<hr><a target="_blank" href="https://www.gyrocode.com/projects/jquery-datatables-checkboxes/examples/integration/rowgroup//">See full article on Gyrocode.com</a>

It would be ideal if the rowgroups were collapsed on page load. It should also be possible to expand several rowgroups simultaneaously.

Any idea how to achieve it please?

Answer 1

you have to call toggle event on tr click and need to apply collapse on group or tr here I updated your code for the collapse group of tr

 $('#example').on('click', '.group-checkbox', function(e){
      // Get group class name
      var groupName = $(this).data('group-name');
        var collapsed = !!collapsedGroups[groupName];
        collapsedGroups[groupName] = !collapsedGroups[groupName];
      // Select all child rows
      table.cells('tr.' + groupName, 0).checkboxes.select(this.checked)
      $(this).toggleClass('collapsed', collapsed);
        table.draw(false);
   });

here is a working demo if need anything to update you can ask me to hope it may help to you.

$(document).ready(function (){
 var collapsedGroups = {};
   var table = $('#example').DataTable({
      'ajax': 'https://gyrocode.github.io/files/jquery-datatables/objects.json',
      'orderFixed': [3, 'asc'],
      'rowGroup': {
         'dataSrc': 'office',
         'startRender': function(rows, group) {
            // Assign class name to all child rows
            var groupName = 'group-' + group.replace(/[^A-Za-z0-9]/g, '');
             var collapsed = !!collapsedGroups[groupName];
            var rowNodes = rows.nodes();
            rowNodes.to$().addClass(groupName);
            rowNodes.each(function (r) {
                r.style.display = collapsed ? 'none' : '';
            });    
            // Get selected checkboxes
            var checkboxesSelected = $('.dt-checkboxes:checked', rowNodes);
            // Parent checkbox is selected when all child checkboxes are selected
            var isSelected = (checkboxesSelected.length == rowNodes.length);
            // Add category name to the <tr>. NOTE: Hardcoded colspan
            return $('<tr/>')
                .append('<td colspan="8"><label><input type="checkbox" class="group-checkbox" data-group-name="' 
                   + groupName + '"' + (isSelected ? ' checked' : '') +'> ' + groupName + ' (' + rows.count() + ')</label></td>')
                .attr('data-name', groupName)
                .toggleClass('collapsed', collapsed);
         
         }         
      },
      'columns': [
         {
            'data': 'id',
            'checkboxes': {
               'selectRow': true
            }
         },
         { 'data': 'name' },
         { 'data': 'position' },
         { 'data': 'office' },
         { 'data': 'salary' }
      ],
      'select': {
         'style': 'multi'
      },
      'order': [[2, 'asc']]
   } );
     
   // Handle click event on group checkbox
   $('#example').on('click', '.group-checkbox', function(e){
      // Get group class name
      var groupName = $(this).data('group-name');
        var collapsed = !!collapsedGroups[groupName];
        collapsedGroups[groupName] = !collapsedGroups[groupName];
      // Select all child rows
      table.cells('tr.' + groupName, 0).checkboxes.select(this.checked)
      $(this).toggleClass('collapsed', collapsed);
        table.draw(false);
   });

   // Handle click event on "Select all" checkbox
   $('#example').on('click', 'thead .dt-checkboxes-select-all', function(e){
      var $selectAll = $('input[type="checkbox"]', this);      
      setTimeout(function(){
         // Select group checkbox based on "Select all" checkbox state
         $('.group-checkbox').prop('checked', $selectAll.prop('checked'));
      }, 0);
   });     

});         

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/v/dt/dt-1.10.16/rg-1.0.2/sl-1.2.4/datatables.min.js"></script>
<script src="https://gyrocode.github.io/jquery-datatables-checkboxes/1.2.9/js/dataTables.checkboxes.min.js"></script>
<link href="https://gyrocode.github.io/jquery-datatables-checkboxes/1.2.9/css/dataTables.checkboxes.css" rel="stylesheet"/>

<link href="https://cdn.datatables.net/v/dt/dt-1.10.16/rg-1.0.2/sl-1.2.4/datatables.min.css" rel="stylesheet"/>
<h3><a target="_blank" href="https://www.gyrocode.com/projects/jquery-datatables-checkboxes/">jQuery DataTables Checkboxes:</a> <a target="_blank" href="https://www.gyrocode.com/projects/jquery-datatables-checkboxes/examples/integration/rowgroup/">RowGroup</a></h3>
    
<table id="example" class="display" cellspacing="0" width="100%">
   <thead>
      <tr>
         <th></th>
         <th>Name</th>
         <th>Position</th>
         <th>Office</th>
         <th>Salary</th>
      </tr>
   </thead>
   <tfoot>
      <tr>
         <th></th>        
         <th>Name</th>
         <th>Position</th>
         <th>Office</th>
         <th>Salary</th>
      </tr>
   </tfoot>
</table>

<hr><a target="_blank" href="https://www.gyrocode.com/projects/jquery-datatables-checkboxes/examples/integration/rowgroup//">See full article on Gyrocode.com</a>