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