jquery – Datatables行分组 – 如何添加每组的rowcount并展开/折叠所有

我正在使用Datatables可折叠/可扩展分组.
http://jquery-datatables-row-grouping.googlecode.com/svn/trunk/collapsibleGroups.html

我已经配置它,以便所有组在初始视图中折叠.

我真的想在组头中添加rowcount(每组的行数),以使行分组更加翔实.它将让用户点击展开该组时需要多少额外的信息.

添加展开/折叠所有按钮也将非常有用.

任何人都可以帮助找到添加这些功能？

我已经设置了一个jsfiddle来显示我要完成的任务：
http://jsfiddle.net/lbriquet/4Rkb3/36/

任何帮助将非常感激！

解决方法

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

原文地址：https://www.jb51.cc/jquery/176404.html