Nhóm hàng có thể chia sẻ dữ liệu - cách thêm số hàng trên mỗi nhóm và mở rộng/thu gọn tất cả

Question

Tôi đang sử dụng Nhóm có thể định cấu hình có thể mở rộng/có thể mở rộng. http://jquery-datatables-row-grouping.googlecode.com/svn/trunk/collapsibleGroups.html

Tôi đã định cấu hình để tất cả các nhóm được thu gọn trong chế độ xem ban đầu.

Tôi thực sự muốn thêm rowcount (số hàng mỗi nhóm) trong tiêu đề nhóm để làm cho nhóm hàng có nhiều thông tin hơn. Nó sẽ cho phép người dùng biết thêm bao nhiêu thông tin để mong đợi khi nhấp vào để mở rộng nhóm.

Sẽ rất hữu ích khi thêm mở rộng/thu gọn tất cả các nút.

Có ai có thể giúp tìm ra để thêm các tính năng này không?

tôi đã thiết lập một jsfiddle để hiển thị những gì tôi đang cố gắng để hoàn thành: http://jsfiddle.net/lbriquet/4Rkb3/36/

Bất kỳ trợ giúp sẽ được thực sự đánh giá cao!

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