javascript - DataTables : Using Row grouping, 如何获取分组条目的计数？

Question

我正在使用 Datatables 创建一个按数据分组的网格。我能够对我的 table 进行分组。

我想完成将条目总数作为分组行计数而不是条目总数，我该怎么做？

由于有 8 个组，因此上图中突出显示的部分应显示“显示 1 到 8 个，共 8 个条目”。

请引用我的 fiddle - http://jsfiddle.net/hh4kq5y0/

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

谢谢

Answer 1

DataTables 默认将此Show x to y from z 文本设置为

"sInfo": "Showing _START_ to _END_ of _TOTAL_ entries"

查看源代码，三个占位符只是被内部变量替换了。您也许可以更改它们，但我不确定，也不建议您这样做。

如果您想更改该信息显示，您可以在 GridRowCount 函数中使用一些 jQuery，您可以在其中通过以下方式访问分组行的总数

$('.dataTables_wrapper').find('[id|=group-id]').length

希望对您有所帮助。