Grouping and sub-grouping: close but not there yet.

dylanmac

The example code for grouping is very helpful:
http://datatables.net/examples/advanced_init/row_grouping.html

I have been trying to extend it to apply a subgrouping heading as well. Here's my code:

var api = this.api(),
    rows = api.rows({page: 'current'}).nodes(),
    allRows = api.rows({page: 'current'}).nodes(),
    last = null,
    sublast = null;
api.column(groupByIndex, {page: 'current'}).data().each(function (group, i) {
    if (last !== group) {
        $(rows).eq(i).before(
            '<tr class="group"><td colspan="5">' + group + '</td></tr>'
        );
        api.column(subGroupByIndex, {page: 'all'}).data().each(function (subGroup, i) {
            if (sublast !== subGroup) {
                $(allRows).eq(i).before(
                    '<tr class="group sub-group"><td colspan="5">' + subGroup + '</td></tr>'
                );
                sublast = subGroup;
            }
        });
        last = group;
    }
});

I am close, but there are certain glitches I am trying to sort out.

The first page renders as expected, with the 1st subgroup title row placed right under the 1st group title row. The next page displays the 1st group title row at the top again (as expected) with the 1st subgroup title row right underneath. But that subgroup title row is repeated again right below the first.

Further down the second page the 2nd group title row begins but there is no 2nd subgroup title row underneath it. The third page continues the 2nd group title row at the top with the subgroup title row right underneath (as expected). But then the next group starts in the middle of the page with no subgroup underneath. Etc.

How do I eliminate the double subgroup title rows and add the subgroup title rows when a new group begins in the middle of a page?

ThomD

Comment removed - no good ideas yet

allan

Can you link to a page showing the issue please? i'm not sure why the above code wouldn't work when my example does appear to work correctly.

Allan

ThomD

Well, this took a bit longer than I thought it would.

http://live.datatables.net/xovixoju/3/edit

$(document).ready( function () {
  var table = $('#example').DataTable( {
            "order": [[ 2, 'asc' ], [ 1, 'asc' ]],
   
                drawCallback: function ( settings ) {
                  var api = this.api();
                  var tableRows = api.rows( {page:'current'} ).nodes();
                  var lastGroup = null;
                  var lastSub = null;   
                  var mySubGroup = null;
                  $(tableRows).each( function () {
                    groupName = this.cells[2].innerHTML;
                    mySubGroup = this.cells[1].innerHTML;
                    if ( lastGroup !== groupName ) {
                        $(this ).before('<tr class="group"><td colspan="6">'+ groupName +'</td></tr>');
                        lastGroup = groupName;
                     }
                    if (lastSub !== mySubGroup) {
                       $(this).before('<tr class="subgroup"><td colspan="6">'+ mySubGroup +'</td></tr>');          
                        lastSub = mySubGroup;  
                    }
                } );
                  }    
      } );
} );

minor edits.

dylanmac

Hey that's fantastic! Thank you. I cannot get it to work in my local environment however. It's close but some subgroups are repeated,, and some subgroups are not grouped right under the group name. I will have to ensure it's not a data issue with the JSON I'm using to populate the table.

ThomD

Remember that it is dependent on the sort order of the visible cells.