嵌套的jQuery Tablesorter表，全部可排序 [英] Nested jQuery Tablesorter tables, all sortable

问题描述

我正在尝试使用jQuery Tablesorter 插件来处理嵌套表，其中内部外部表是可排序的.外部表的每一行通常都包含一个按钮，当单击该按钮时，它会在其下一行显示一个隐藏的内部表(尽管为简单起见，我跳过了下面HTML中的按钮，使所有内容一开始都是可见的.)

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).

内部表与"expand-child"类一起位于一行中，该表告诉Tablesorter在排序时将其保持在其正上方.这通常可以正常工作，但是单击时外部表标题不能正确突出显示，并且内部表根本无法正确排序.

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.

下面是我的HTML，我还创建了一个 jsfiddle 来显示问题.感谢您的帮助.

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>

推荐答案

我已经分叉了您的jsfiddle，并使用了选择器进行了更新，以便按我认为的顺序排序...

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

您可以从我的fork中看到，您只需要特定于表排序器插件配置即可.

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

这篇关于嵌套的jQuery Tablesorter表，全部可排序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！