jQuery 数据表行分组 - 如何为每组添加行数并展开/折叠所有
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10460421/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Datatables row grouping - how to add rowcount per group and expand/collapse all
提问by lbriquet
I am using Datatables Collapsible/Expandable Grouping. http://jquery-datatables-row-grouping.googlecode.com/svn/trunk/collapsibleGroups.html
我正在使用数据表可折叠/可扩展分组。 http://jquery-datatables-row-grouping.googlecode.com/svn/trunk/collapsibleGroups.html
I have configured it so that all groups collapsed in the initial view.
我已经对其进行了配置，以便所有组都在初始视图中折叠。
I would really like to add the rowcount (number of rows per group) in the group header to make the row grouping more informative. It would let the user how much extra information to expect when clicking to expand the group.
我真的很想在组标题中添加 rowcount（每组的行数）以使行分组更具信息性。它会让用户在单击以展开组时期望获得多少额外信息。
It would also be very useful to add expand/collapse all buttons.
添加展开/折叠所有按钮也非常有用。
Can anyone help to find away to add these features?
任何人都可以帮助找到添加这些功能吗？
I've set up a jsfiddle to show what I'm trying to accomplish: http://jsfiddle.net/lbriquet/4Rkb3/36/
我已经设置了一个 jsfiddle 来展示我想要完成的任务：http: //jsfiddle.net/lbriquet/4Rkb3/36/
Any help would be really appreciated!
任何帮助将非常感激！
回答by Thulasiram
$(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;
}
