Datatables row grouping - how to add rowcount per group and expand/collapse all

前端 未结 1 2008
死守一世寂寞
死守一世寂寞 2020-12-31 09:52

I am using Datatables Collapsible/Expandable Grouping. http://jquery-datatables-row-grouping.googlecode.com/svn/trunk/collapsibleGroups.html

I have configured it so

相关标签:
1条回答
  • 2020-12-31 10:21
        $(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;
            }
    
    0 讨论(0)
提交回复
热议问题