Raggruppamento di righe di dati: come aggiungere il conteggio di righe per gruppo ed espandere/comprimere tutto

Question

Sto utilizzando Raggruppamento di dati raggruppabile/espandibile. http://jquery-datatables-row-grouping.googlecode.com/svn/trunk/collapsibleGroups.html

L'ho configurato in modo tale che tutti i gruppi vengano compressi nella vista iniziale.

Vorrei davvero aggiungere il conteggio delle righe (numero di righe per gruppo) nell'intestazione del gruppo per rendere il raggruppamento delle righe più informativo. Permetterebbe all'utente di sapere quante informazioni extra aspettarsi facendo clic per espandere il gruppo.

Sarebbe anche molto utile aggiungere/espandere tutti i pulsanti.

Qualcuno può aiutare a trovare via per aggiungere queste funzionalità?

ho creato un jsfiddle per mostrare quello che sto cercando di realizzare: http://jsfiddle.net/lbriquet/4Rkb3/36/

Qualsiasi aiuto sarebbe molto apprezzato!

Answer 1

$(document).ready(function() { 
       $('#example').dataTable({ 
        "bLengthChange": false, 
        "bPaginate": false, 
        "bJQueryUI": true 
       }).rowGrouping({ 
        bExpandableGrouping: true, 
        bExpandSingleGroup: false, 
        iExpandGroupOffset: -1, 
        asExpandedGroups: [""] 
       }); 

       GridRowCount(); 
      }); 

      function GridRowCount() { 
       $('span.rowCount-grid').remove(); 
       $('input.expandedOrCollapsedGroup').remove(); 

       $('.dataTables_wrapper').find('[id|=group-id]').each(function() { 
        var rowCount = $(this).nextUntil('[id|=group-id]').length; 
        $(this).find('td').append($('<span />', { 'class': 'rowCount-grid' }).append($('<b />', { 'text': rowCount }))); 
       }); 

       $('.dataTables_wrapper').find('.dataTables_filter').append($('<input />', { 'type': 'button', 'class': 'expandedOrCollapsedGroup collapsed', 'value': 'Expanded All Group' })); 

       $('.expandedOrCollapsedGroup').live('click', function() { 
        if ($(this).hasClass('collapsed')) { 
         $(this).addClass('expanded').removeClass('collapsed').val('Collapse All Group').parents('.dataTables_wrapper').find('.collapsed-group').trigger('click'); 
        } 
        else { 
         $(this).addClass('collapsed').removeClass('expanded').val('Expanded All Group').parents('.dataTables_wrapper').find('.expanded-group').trigger('click'); 
        } 
       }); 
      }; 


// ------------ Css -------------------------// 
     .rowCount-grid 
     { 
      float: right; 
      font-size: 15px; 
      color: Red; 
      padding-right: 250px; 
     }