Я на самом деле не программист Javascript, поэтому я борюсь с этим! Я использую плагин tablesorter вместе с плагином Tablegroup , который очень хорошо работает для группировки строк таблицы по родителям, а затем сортирует родителей.
Моя проблема в том, что я также хотел бы, чтобы дочерние строки были отсортированы в родительской группе
Я приложил все усилия, чтобы заставить это работать, но я боюсь, что ударил стену. Кто-нибудь может предложить новый стартер на 10?
Пример ниже работает нормально - здесь есть 2 группы:
- Северные страны (Норвегия и Дания)
- DACH (Германия и Австрия)
Если щелкнуть строку заголовка, группы будут отсортированы, но дочерние строки в группе не отсортированы.
<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>