DataTables

Hi!

I'm trying to combine all these features but it's not working correctly.
The table detail rows start by being collapsed. If I expand the last row of a group and then click sorting twice it expands correctly but after the sorting the details row ends up going into the next group.

My code for the row grouping is very similar to the one in the example:

          "fnDrawCallback": function ( oSettings ) {
              if ( oSettings.aiDisplay.length == 0 ) { return }

              var nTrs = $j('#fleet_datatable tbody tr:not(.family)')
              var iColspan = nTrs[0].getElementsByTagName('td').length
              var sLastGroup = ""
              for (var i=0;i<nTrs.length;i++) {
                  var iDisplayIndex = oSettings._iDisplayStart + i
                  var sGroup = oSettings.aoData[ oSettings.aiDisplay[iDisplayIndex] ]._aData[0]
                  if ( sGroup != sLastGroup ) {
                      var nGroup = document.createElement( 'tr' )
                      nGroup.className = "family"
                      var nCell = document.createElement( 'td' )
                      nCell.colSpan = iColspan
                      nCell.innerHTML = sGroup + ' family'
                      nGroup.appendChild( nCell )
                      nTrs[i].parentNode.insertBefore( nGroup, nTrs[i] )
                      sLastGroup = sGroup
                  }

The problem seems to be the insertion point of the group row...