I am trying to get the jQuery Tablesorter plugin to work with nested tables, where both internal and external tables are sorted. Each row of the outer table usually contains a button that, when clicked, shows a hidden inner table in the row just below (although I skipped the button in the HTML below for simplicity , making everything initially visible).
The internal table is in a row with the "expand-child" class, which tells Tablesorter to store it next to it when sorting. This basically works, but the outer headers of the table are not highlighted correctly when clicked, and the inner table is not sorted correctly.
I know about this SO question and that one of the solutions is to disable sorting in the internal table, but I want both the external and internal tables to be sorted.
My HTML is below and I also created jsfiddle displaying the problem. Thanks for any help.
<table class="tablesorter">
<thead>
<tr>
<th>Make</th>
<th>Model</th>
</tr>
</thead>
<tbody>
<tr>
<td>Honda</td>
<td>Accord</td>
</tr>
<tr class="expand-child">
<td colspan="2" style="padding: 0 30px 0 30px;">
<table class="tablesorter">
<thead>
<tr>
<th>Doors</th>
<th>Colors</th>
</tr>
</thead>
<tbody>
<tr>
<td>Honda 2-Door</td>
<td>Honda Red</td>
</tr>
<tr>
<td>Honda 4-Door</td>
<td>Honda Blue</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>Toyota</td>
<td>Camry</td>
</tr>
<tr class="expand-child">
<td colspan="2" style="padding: 0 30px 0 30px;">
<table class="tablesorter">
<thead>
<tr>
<th>Doors</th>
<th>Colors</th>
</tr>
</thead>
<tbody>
<tr>
<td>Toyota 2-Door</td>
<td>Toyota Yellow</td>
</tr>
<tr>
<td>Toyota 4-Door</td>
<td>Toyota Green</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
source
share