jquery tablesorter: nested tables

Question

I have nested tables where both the inner and outer tables have rows added to them dynamically. When I trigger an update of an inner table, after the inner table order has been changed, the order of the outer table is also changed. I've created a jsfiddle to demonstrate this:

http://jsfiddle.net/FZLxp/

which is forked from the OS question Nested jQuery Tablesorter tables, all sortable

To see the problem sort the outer table by Make so that Toyota is at the top and then click the "update" button. The update button triggers an update of the inner toyota table but also sorts the outer table as well to reflect the sort direction of the Toyota Doors column.

How can I sort the inner table after adding additional rows without sorting the outer table as well?

<script type="text/javascript">
function updateRW() {
    $("#toyota").trigger("update", [true]);
}
</script>

<table class="tablesorter">
    <thead>
        <tr>
            <th>Make</th>
            <th>Model</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Honda</td>
            <td>Accord</td>
        </tr>
        <tr class="tablesorter-childRow">
            <td colspan="2" style="padding: 0 30px 0 30px;">
                <table class="tablesorter-child">
                    <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="tablesorter-childRow">
            <td colspan="2" style="padding: 0 30px 0 30px;">
                <table id="toyota" class="tablesorter-child">
                    <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>
<input type=button value="update" onclick="updateRW()">

$(document).ready(function() 
{ 
    $("table").tablesorter({selectorHeaders: '> thead > tr > th'}); 
});

Answer 1

This appears to be a bug in tablesorter!

I've opened an issue so we can track it, and I should have this fixed in the next update.

Thanks for reporting it!