JQuery tablesorter - Keeping grouped subheaders together, but still sorted
        Posted  
        
            by hfidgen
        on Stack Overflow
        
        See other posts from Stack Overflow
        
            or by hfidgen
        
        
        
        Published on 2010-03-29T11:39:48Z
        Indexed on 
            2010/03/29
            11:43 UTC
        
        
        Read the original article
        Hit count: 745
        
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:
- Nordics (Norway and Denmark)
 - 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"> </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>
        © Stack Overflow or respective owner