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: 632

Filed under:
|
|

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>

© Stack Overflow or respective owner

Related posts about jQuery

Related posts about tablesorter