Вопрос по grouping, jquery – Группировка строк Datatables - как добавить количество строк на группу и развернуть / свернуть все

12

Я использую Datatables Collapsible / Expandable Grouping. http://jquery-datatables-row-grouping.googlecode.com/svn/trunk/collapsibleGroups.html

Я настроил его так, чтобы все группы рухнули в первоначальном виде.

Мне бы очень хотелось добавить количество строк (количество строк в группе) в заголовок группы, чтобы сделать группировку строк более информативной. Это позволило бы пользователю узнать, сколько дополнительной информации ожидать при нажатии, чтобы развернуть группу.

Также было бы очень полезно добавить развернуть / свернуть все кнопки.

Может ли кто-нибудь помочь найти прочь, чтобы добавить эти функции?

Я настроил jsfiddle, чтобы показать, что я пытаюсь выполнить: http://jsfiddle.net/lbriquet/4Rkb3/36/

Любая помощь могла бы быть полезна!

Я добавил ссылку jsfiddle теперь в пост выше. Заранее спасибо за вашу помощь!! lbriquet
к..как я могу скачать этот плагин? Вы можете вставить код вjsfiddle.net Thulasiram

Ваш Ответ

1   ответ
15
    $(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;
        }
Error: User Rate Limit Exceeded lbriquet
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceededjsfiddle.net/nanoquantumtech/RgKPZ

Похожие вопросы