JQuery Datatables Grouping Plugin - way to expand two levels?

Question

As for the jquery datatables row grouping plugin: http://jquery-datatables-row-grouping.googlecode.com/svn/trunk/index.html , is it possible to have two-level grouping and also have both groups expandable / collapsible? I could not find anything on the site mentioning this. I wonder if he tried it.

Answer 1

I have not seen anything about the plugin doing this. I think that the most effective solution (in terms of runtime) would be to modify the rowGrouping plugin itself, but this can be complicated every time the creator updates the plugin (and, as far as I know, it is actually impossible to extend the jQuery plugin).

Anyway, I came up with a solution. It's ugly and can cost a lot of improvements, but hopefully it at least arouses some ideas. I basically created my own jQuery plugin that wraps the rowGrouping plugin (you can also just use the middle part separately - see the notes in the code). It creates an instance of rowGrouping dataTable, then crosses the rows that look for the rows of the subgroups in each main group. He then finds the lines under each subgroup and assigns them a class unique to that group / subgroup. Finally, he uses this class as a selector to switch rows when clicking on a row in a subgroup.

// 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 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'); // eg, 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 is how you use it:

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

Hope this helps. Greetings.

Answer 2

initialization of a subgroup Id should be prior to each call

 var subgroupId = 0; // incremental Id within group oTableGrouped.find('tbody tr td.group').each(function(index, elem) { .. .. .. } 

Answer 3

Set both of these booleans to true:

 bExpandableGrouping: true bExpandableGrouping2: true