JQuery tablesorter - Keeping grouped subheaders together, but still sorted

Question

Hiya,

I'm not really a Javascript programmer, so I'm struggling with this! I'm using the tablesorter plugin along with the Tablegroup plugin, which work very nicely to group the table rows by a parent, and then sort the parents.

My problem is though, that I'd also like the child rows to be sorted whilst within the parent group

I've done my best to get this working but I'm afraid I've hit a wall. Can anyone suggest a new starter for 10?

The example below is working fine - There are 2x groups here:

1. Nordics (Norway and Denmark)
2. DACH (Germany and Austria)

If I click on the header row, the groups are sorted, but the child rows within the group are not sorted.

<script type="text/javascript">
        $(document).ready(function () {
            $(".tablesorter")
                .tablesorter({
                // set default sort column
                sortList: [[0,0]],
                // don't sort by first column
                headers: {0: {sorter: false}}
                , onRenderHeader: function (){
                    this.wrapInner("<span></span>");
                }
                , debug: true
            })
        }); 
</script>
<table id="results-header" class="grid tablesorter table-header" cellpadding="0" cellspacing="0" border="0">
  <thead>
    <tr class="title">
      <th class="countries">&nbsp;</th>
      <th>% market share</th>
      <th>% increase in mkt share</th>
      <th>Target achieved</th>
      <th>% targets</th>
      <th>% sales inc. M-o-M</th>
      <th>% sales inc. M-o-M for country</th>
      <th>% training</th>
    </tr>
  </thead>
  <tbody>
    <tr id="Nord" class="collapsible parent parent-even collapsed">
      <td class="countries">Nordics</td>
      <td>39.5</td>
      <td>49</td>
      <td>69.8</td>
      <td>51.8</td>
      <td>43</td>
      <td>42.5</td>
      <td>38</td>
    </tr>
    <tr id="row-Norway" class="expand-child child child-Nord">
      <td class="countries">Norway</td>
      <td>6</td>
      <td>45</td>
      <td>101</td>
      <td>10</td>
      <td>20</td>
      <td>40</td>
      <td>30</td>
    </tr>
    <tr id="row-Denmark" class="expand-child child child-Nord">
      <td class="countries">Denmark</td>
      <td>10</td>
      <td>20</td>
      <td>3</td>
      <td>40</td>
      <td>50</td>
      <td>25</td>
      <td>8</td>
    </tr>
    <tr id="DACH" class="collapsible parent parent-odd collapsed">
      <td class="countries">DACH</td>
      <td>77</td>
      <td>61</td>
      <td>43</td>
      <td>98</td>
      <td>65</td>
      <td>92.5</td>
      <td>59.5</td>
    </tr>
    <tr id="row-Germany" class="expand-child child child-DACH">
      <td class="countries">Germany</td>
      <td>56</td>
      <td>24</td>
      <td>84</td>
      <td>98</td>
      <td>32</td>
      <td>87</td>
      <td>21</td>
    </tr>
    <tr id="row-Austria" class="expand-child child child-DACH">
      <td class="countries">Austria</td>
      <td>98</td>
      <td>98</td>
      <td>2</td>
      <td>98</td>
      <td>98</td>
      <td>98</td>
      <td>98</td>
    </tr>
  </tbody>
</table>

Answer 1

Without trying this out it looks like you only use the tablesorter as your call looks like

$(".tablesorter").tablesorter({...})

If you are using tableGroup shouldn't there be some calls like this one around?

$(...).tableGroup({...})

On the homepage of tableGroup the code looks like this

$('table').tableSorter({...}).sortStop(function (e, col) {
    $(this).tableUnGroup();
    ...
        $(this).tableGroup({...});
    ...
});