Question

Concerning the jquery datatables rowgrouping plugin: http://jquery-datatables-row-grouping.googlecode.com/svn/trunk/index.html , is it possible to have the two-level grouping and also have both groupings expandable / collapsible? I couldn’t find anything on the site mentioning this.. wondering if any has tried it

Answer 1

I didn’t see anything either about the plugin doing this. I think the most efficient solution (in terms of runtime) would be to modify the rowGrouping plugin itself, but that might get complicated every time the creator updates the plugin (and to the best of my knowledge, it’s not really possible to extend a jQuery plugin).

Anyway, I came up with a solution. It’s not pretty and could stand to use a lot of improvement, but hopefully it serves to spark some ideas at the very least. Basically I created my own jQuery plugin that wraps the rowGrouping plugin (you could also just use the middle part by itself – see notes in code). It instantiates a rowGrouping dataTable then traverses the rows looking for subgroup rows within each major group. Then it finds rows under each subgroup and assigns them a class unique to that group/subgroup combination. Finally, it uses this class as a selector to toggle the rows when a subgroup row is clicked.

// create our own jQuery plugin that wraps rowGrouping
(function ($) {
    $.fn.rowGroupingWithColapsableSecondLevel = function (options) {
        return this.each(function (index, elem) {
            // construct a rowGrouping object
            var oTableGrouped = $(elem).dataTable().rowGrouping(options);

            // subgroup row/tds are not uniquely identified
            // find each group row (identified by it's td having the class .group) and identify it (via a unique class per subgroup) and bind a click to the subgroup row that will toggle this class

            // SIDE NOTE: if you don't want to use the plugin wrapping method, just isolate the following "find" block and replace oTableGroup with a reference to the table object (or create an object or function with the find block)
            // example: var myTable = $('#example').dataTable().rowGrouping(); // then use myTable.find... below

            oTableGrouped.find('tbody tr td.group').each(function(index, elem) {
                var groupName = $(elem).attr('rel'); // e.g., group-1
                var tr = $(elem).parent();
                var subgroupId = 0; // incremental Id within group

                // go through subsequent rows looking for subgroups until we hit another major group (or run out of rows)
                do {
                    var tr = tr.next('tr'); // get the next row
                    if (tr.find('td').hasClass('subgroup')) {
                        // this is a subgroup row
                        subgroupId ++;
                        // give this subgroup an id so we can work with it
                        tr.attr('id', groupName + '-subgroup-' + subgroupId);
                        // assign parent group id as class so it will be toggled with other rows
                        tr.addClass('group-item-' + groupName);
                        // assign a toggle function
                        tr.click( function() {
                            $('.' + $(this).attr('id')).toggle();
                        });
                    } else if(tr.find('td').hasClass('group')) {
                        // we've reached the next group, exit the do loop (the next group will be picked up by the next oTableGroup.find)
                        break;
                    } else if(tr.length == 1) {
                        // this is a row under the subgroup, identify it by adding a class
                        tr.addClass(groupName + '-subgroup-' + subgroupId);
                    }
                } while (tr.length == 1);
            }); // end of the find block

            return oTableGrouped;
        })
    };
})(jQuery);

And here’s how you would use it:

$(function() {
    var oTable = $('#example').dataTable({ "bLengthChange": false, "bPaginate": false}).rowGroupingWithColapsableSecondLevel({  "iGroupingColumnIndex2": 1 , "bExpandableGrouping": true });
});

Hope this helps. Cheers.