Using TableSorter plugin, i need to sort multiple TR who are a block composed by multiple TR (undefined number of sub TR) (example in jsfiddle)
<tbody id='ligne-pilote'>
<tr data-id='4578575' class='lineX'>
<td colspan='10' class='group-tr'>
<table class='line'>
<tr height='26'>
<td class='b-right' width='33%'>Arbre</td>
<td class='b-right' width='6%' align='center'><span>250</span></td>
<td class='b-right' width='6%' align='center'><span>360</span></td>
<td class='b-right' width='8%' align='center'>5</td>
<td class='b-right' width='8%' align='center'>35</td>
<td class='b-right' width='8%' align='center'>72</td>
<td class='b-right' width='8%' align='center'>1200</td>
<td class='b-right' width='6%' align='center'>3850</td>
<td class='b-right' width='15%' align='center'>2055</td>
<td class='' width='2%' align='center'>ok</td>
</tr>
<tr height='26' class='test'>
<td class='b-right b-top' width='33%'> - Pin blanc</td>
<td class='b-right b-top' width='6%' align='center'><span>Sub-Data-col 2</span></td>
<td class='b-right b-top' width='6%' align='center'><span>Sub-Data-col 3</span></td>
<td class='b-right b-top' width='8%' align='center'>Sub-Data-col 4</td>
<td class='b-right b-top' width='8%' align='center'>Sub-Data-col 5</td>
<td class='b-right b-top' width='8%' align='center'>Sub-Data-col 6</td>
<td class='b-right b-top' width='8%' align='center'>Sub-Data-col 7</td>
<td class='b-right b-top' width='6%' align='center'>Sub-Data-col 8</td>
<td class='b-right b-top' width='15%'align='center'>Sub-Data-col 9</td>
<td class='b-top' width='2%' align='center'>ok</td>
</tr>
<tr height='26' class='test'>
<td class='b-right b-top' width='33%'> - Saules</td>
<td class='b-right b-top' width='6%' align='center'><span>Sub-Data-col 2</span></td>
<td class='b-right b-top' width='6%' align='center'><span>Sub-Data-col 3</span></td>
<td class='b-right b-top' width='8%' align='center'>Sub-Data-col 4</td>
<td class='b-right b-top' width='8%' align='center'>Sub-Data-col 5</td>
<td class='b-right b-top' width='8%' align='center'>Sub-Data-col 6</td>
<td class='b-right b-top' width='8%' align='center'>Sub-Data-col 7</td>
<td class='b-right b-top' width='6%' align='center'>Sub-Data-col 8</td>
<td class='b-right b-top' width='15%'align='center'>Sub-Data-col 9</td>
<td class='b-top' width='2%' align='center'>ok</td>
</tr>
</table>
</td>
</tr>
<tr data-id='45784515' class='lineX'>
<td colspan='10' class='group-tr'>
<table class='line'>
<tr height='26' >
<td class='b-right' width='33%'>Bateau</td>
<td class='b-right' width='6%' align='center'><span>3520</span></td>
<td class='b-right' width='6%' align='center'><span>6230</span></td>
<td class='b-right' width='8%' align='center'>321</td>
<td class='b-right' width='8%' align='center'>322</td>
<td class='b-right' width='8%' align='center'>323</td>
<td class='b-right' width='8%' align='center'>500</td>
<td class='b-right' width='6%' align='center'>780</td>
<td class='b-right' width='15%' align='center'>6542</td>
<td width='2%' align='center'>ok</td>
</tr>
<tr height='26' class='test'>
<td class='b-right b-top' width='33%'> - Royal Fortune</td>
<td class='b-right b-top' width='6%' align='center'><span>Sub-Data-col2 2</span></td>
<td class='b-right b-top' width='6%' align='center'><span>Sub-Data-col2 3</span></td>
<td class='b-right b-top' width='8%' align='center'>Sub-Data-col2 4</td>
<td class='b-right b-top' width='8%' align='center'>Sub-Data-col2 5</td>
<td class='b-right b-top' width='8%' align='center'>Sub-Data-col2 6</td>
<td class='b-right b-top' width='8%' align='center'>Sub-Data-col2 7</td>
<td class='b-right b-top' width='6%' align='center'>Sub-Data-col2 8</td>
<td class='b-right b-top' width='15%' align='center'>Sub-Data-col2 9</td>
<td class='b-top' width='2%' align='center'>ok</td>
</tr>
<tr height='26' class='test'>
<td class='b-right b-top' width='33%'> - Royal James</td>
<td class='b-right b-top' width='6%' align='center'><span>Sub-Data-col3 2</span></td>
<td class='b-right b-top' width='6%' align='center'><span>Sub-Data-col3 3</span></td>
<td class='b-right b-top' width='8%' align='center'>Sub-Data-col3 4</td>
<td class='b-right b-top' width='8%' align='center'>Sub-Data-col3 5</td>
<td class='b-right b-top' width='8%' align='center'>Sub-Data-col3 6</td>
<td class='b-right b-top' width='8%' align='center'>Sub-Data-col3 7</td>
<td class='b-right b-top' width='6%' align='center'>Sub-Data-col3 8</td>
<td class='b-right b-top' width='15%' align='center'>Sub-Data-col3 9</td>
<td class='b-top' width='2%' align='center'>ok</td>
</tr>
<tr height='26' class='test'>
<td class='b-right b-top' width='33%'> - The Ranger</td>
<td class='b-right b-top' width='6%' align='center'><span>Sub-Data-col3 2</span></td>
<td class='b-right b-top' width='6%' align='center'><span>Sub-Data-col3 3</span></td>
<td class='b-right b-top' width='8%' align='center'>Sub-Data-col3 4</td>
<td class='b-right b-top' width='8%' align='center'>Sub-Data-col3 5</td>
<td class='b-right b-top' width='8%' align='center'>Sub-Data-col3 6</td>
<td class='b-right b-top' width='8%' align='center'>Sub-Data-col3 7</td>
<td class='b-right b-top' width='6%' align='center'>Sub-Data-col3 8</td>
<td class='b-right b-top' width='15%' align='center'>Sub-Data-col3 9</td>
<td class='b-top' width='2%' align='center'>ok</td>
</tr>
<tr height='26' class='test'>
<td class='b-right b-top' width='33%'> - Queen Anne's Revenge</td>
<td class='b-right b-top' width='6%' align='center'><span>Sub-Data-col3 2</span></td>
<td class='b-right b-top' width='6%' align='center'><span>Sub-Data-col3 3</span></td>
<td class='b-right b-top' width='8%' align='center'>Sub-Data-col3 4</td>
<td class='b-right b-top' width='8%' align='center'>Sub-Data-col3 5</td>
<td class='b-right b-top' width='8%' align='center'>Sub-Data-col3 6</td>
<td class='b-right b-top' width='8%' align='center'>Sub-Data-col3 7</td>
<td class='b-right b-top' width='6%' align='center'>Sub-Data-col3 8</td>
<td class='b-right b-top' width='15%' align='center'>Sub-Data-col3 9</td>
<td class='b-top' width='2%' align='center'>ok</td>
</tr>
</table>
</td>
</tr>
https://jsfiddle.net/gratien/mn3gpu2h/10/
When I click on "Col1" i need to sort only the first line of each block of this column, same thing with "Col 2" who must sort only the second column.
I don't know how to make this, can you help?
Thanks!
I think this is a good case for the sort-tbodies widget (see the last example).
You'll need to reformat the HTML... remove the td with a colspan, table and first tr of each block:
<td colspan='10' class='group-tr'>
<table class='line'>
<tr height='26' >
and the associated closing tags
</tr>
</table>
</td>
then wrap each block in a <tbody>...</tbody>:
<tbody>
<tr class="lineX">...</tr>
<tr>...</tr>
<tr>...</tr>
</tbody>
And lastly, initialize tablesorter on the outer table:
$("#sort").tablesorter({
sortList: [0,0],
sortMultiSortKey: 'altKey',
widgets: ['sortTbody'],
widgetOptions: {
sortTbody_lockHead: true,
sortTbody_primaryRow: '.lineX',
sortTbody_sortRows: true
}
});
Don't forget to include the widget-sortTbodies widget:
<script src="../js/widgets/widget-sortTbodies.js"></script>