Datatables行グループ化 - グループごとに行数を追加し、すべてを展開/折りたたむ方法

Question

データ型の折りたたみ可能/展開可能なグループ化を使用しています。 http://jquery-datatables-row-grouping.googlecode.com/svn/trunk/collapsibleGroups.html

すべてのグループが初期表示で折りたたまれるように設定しました。

行のグループ化をより有益なものにするために、グループヘッダーにrowcount（グループあたりの行数）を追加することを本当にしたいと思います。グループをクリックしてクリックすると、追加の情報がどれくらいの割合でユーザに表示されますか。

また、すべてのボタンを展開/折りたたむを追加すると非常に便利です。

これらの機能を追加する方法はありますか？

は私が達成しようとしているかを示すためにjsfiddleを設定している： http://jsfiddle.net/lbriquet/4Rkb3/36/

すべてのヘルプは本当にいただければ幸いです！

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; 
     }