Expand/collapse row grouping

Karkuro

I have a working datatable with some row grouping.

$(document).ready(function() {
            var table = $('#datatable').DataTable( {
            "ajax": "<?php echo base_url()."assets/files/data/data.txt"; ?>" ,
            "columns": [
               { "data": "etat" },
               { "data": "quittance" },
               { "data": "date" },
               { "data": "dest" },
               { "data": "message" },
               { "data": "exp" }
               ],
               "columnDefs": [
               { "visible": false, "targets": 2 }
               ],
               "order": [[ 2, "desc" ]],
               //"ordering": false,
               "responsive": true,
                drawCallback: function (settings) {
               var api = this.api();
               var rows = api.rows({ page: 'current' }).nodes();
               var last = null;
            
               api.column(2, { page: 'current' }).data().each(function (group, i) {
            
            
                   if (last !== group) {
            
                       
                       $(rows).eq(i).before(
                           '<td class="group" colspan="8" style="BACKGROUND-COLOR:rgb(212, 212, 212);font-weight:700;color:#1F1F1F;">' + 'Alarme du ' + group + '</td>'
                       );
            
                       last = group;
                   }
              
               });
            },
               "language": {
                  "url": "<?php echo base_url()."assets/files/French.json"; ?>"
               }
               } );
              // Order by the grouping
            $('#datatable').on( 'click', 'td.group', function () {
            var currentOrder = table.order()[0];
            if ( currentOrder[0] === 2 && currentOrder[1] === 'desc' ) {
               table.order( [ 2, 'asc' ] ).draw();
            }
            else {
               table.order( [ 2, 'desc' ] ).draw();
            }
            } );
            } );  
            
            $('#datatable').DataTable({
            "drawCallback": function( settings ) {
            $("#datatable").wrap( "<div class='table-responsive'></div>" );
            }
            
            });

It looks like this :

http://i.imgur.com/rGYUqXZ.png

At the moment, when we click on the row, it sorts by the date. I'd like to know if it's possible to expand/collapse all data under a row ?

allan

There is no built in option to do that. You would need to modify your code above to implement filtering as well as grouping. I'm not sure how easy that would be to be honest since your grouping code is based on the data visible in the table - you'd need to update it to take account of any rows that have been removed by filtering.

Allan