RowGroup Expand/Collape All button

Chillidad

Hello,
after spending hours searching, i decided to post my request.
i have a working datatable with expandable rows.
i need to add a custom button at the top that can expand/collapse all groups.
here is my code:

$(document).ready(function() {
var collapsedGroups = {};

var table = $('#analysis').DataTable({
    columnDefs: [

        {
            "targets": [0],
            "visible": false,
            "searchable": true
        }

    ],
    bSortable: true,
    paging: true,
    pagingType: 'full_numbers',
    lengthMenu: [[10, 25, 50, 100,500,1000, -1], [10, 25, 50, 100,500,1000, "All"]],
     displayLength: -1,
    colReorder: true,
    bFilter: true,
    responsive: false,
    select: true,
    dom: 'lBfrtip',
    buttons:[
        {
            extend: 'collection',
            background: false,
            text: '<i class="fa fa-tasks"></i> &nbsp Manage',
            buttons: ['copy', 'excel', 'pdf', 'print']
        },
        {
            text: '<i class="fa fa-columns"></i> &nbsp Columns',
            extend: 'colvis',
            background: false
        },
   {
            text: '<i class="fa fa-plus"></i> &nbsp Expand\Collapse All',
            action: 


           //---> the code should end here <--//



            })} 
        },
        ],
  order: [[0, 'asc']],
  rowGroup: {
    // Uses the 'row group' plugin
    dataSrc: 0,
    startRender: function (rows, group) {
        var collapsed = !!collapsedGroups[group];

        //rows.nodes().each(function (r) {
        //    r.style.display = collapsed ? 'none' : '';
        //});    
        rows.nodes().each(function (r) {
      r.style.display = 'none';
      if (collapsed) {
        r.style.display = '';
      }});        
        return $('<tr/>')
           .append('<td colspan="'+rows.columns()[0].length+'">'  + group + ' (' + rows.count() + ')</td>')
            .attr('data-name', group)
            .toggleClass('collapsed', collapsed);
    }
  }
});

$('#analysis tbody').on('click', 'tr.group-start', function () {
var name = $(this).data('name');
collapsedGroups[name] = !collapsedGroups[name];
table.draw(false);
});
});

kthorngren

See if this thread helps.

Kevin

Chillidad

thank you for the help Kevin.
while scrolling through the comments on the thread you gave me, i found a piece of code and modified it a bit like this:

buttons:[

       {
                text: '<i class="fa fa-plus"></i> &nbsp Expand/Collapse All',
                action: function ()
                {
                    $('#analysis tbody tr.group-start').each(function() {
                   var name = $(this).data('name');
                   collapsedGroups[name] = !collapsedGroups[name];
                   table.draw(false);
                });
          }
            ],

it works perfectly as i wanted.
i noticed that it takes few secs to expand\collapse the data (1,500 records)

if by chance someone has a better performance wise alternative, let us know.

otherwise, the above code did the job for me.