数据表行分组 – 如何为每个组添加行数并展开/折叠所有

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

我已对其进行了配置，以便所有组在初始视图中折叠。

我真的想在组头中添加rowcount（每组的行数），以使行分组更具信息性。 它会让用户在单击以展开组时可以获得多少额外信息。

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

任何人都可以帮忙找到添加这些function？

我已经设置了一个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($('', { 'class': 'rowCount-grid' }).append($('', { 'text': rowCount }))); }); $('.dataTables_wrapper').find('.dataTables_filter').append($('', { '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; }