JQuery tablesorter - Keeping grouped subheaders together, but still sorted
- by hfidgen
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>
