Question

I’m trying to get the jQuery Tablesorter plugin to work with nested tables, where both the inner and outer tables are sortable. Each row of the outer table normally contains a button that, when clicked, reveals a hidden inner table in the row just below it (although I’ve skipped the button in the HTML below for simplicity, making everything initially visible).

The inner table is in a row with a class of “expand-child”, which tells Tablesorter to keep it with the row just above it when sorted. This mostly works, but the outer table headers aren’t highlighting correctly when clicked, and the inner table isn’t sorting right at all.

I know about this SO question, and that one solution is to disable sorting on the inner table, but I specifically want both the outer and inner tables to be sortable.

My HTML is below, and I’ve also created a 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>

Answer 1

I have forked your jsfiddle and updated with selectors so as it orders as I think you want it… http://jsfiddle.net/P2DsY/

You can see from my fork that you just needed to be specific with the table sorter plugin configuration.