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>