Question

我们一直在使用jquery tablesorter.js对表行进行排序。但是最近我们必须将表拆分为多个表，滚动条才能使用固定列。这工作正常，但排序功能已经消失。我们不能再在多个表上使用tablesorter了。

有些人可以使用tablesorter.js建议任何解决方案吗？ HTML：

<table id="MainTbl">
<tbody>
 <tr>
    <td>
        <table id="tbl1">
            <thead>
                <tr class="A">
                    <th class="brkDwnDivComposite-first"> Caption </th>
                </tr>
            </thead>
            <tbody>
                <tr class="A">
                    <td><span title="A1">A1</span></td>
                </tr>
                <tr class="A">
                    <td><span title="A2">A2</span></td>
                </tr>
                <tr class="A">
                    <td><span title="A3">A3</span></td>
                </tr>
                <tr class="A">
                    <td><span title="A4">A4</span></td>
                </tr>
                <tr class="B">
                    <td><span title="Totals">Totals</span></td>
                 </tr>
            </tbody>
        </table>
    </td>
    <td style="width:660px">
        <div style="width: 660px; overflow-X: scroll">
            <table id="tbl2">
                <thead>
                    <tr class="A">
                        <th class="">08/19</th>
                        <th class="">08/21</th>
                        <th class="">08/26</th>
                        <th class="">09/09</th>
                        <th class="">09/23</th>
                     </tr>
                </thead>
                <tbody>
                    <tr class="A">
                        <td class="val">23</td>
                        <td class="val">1</td>
                        <td class="val">4</td>
                        <td class="val">45</td>
                        <td class="val">56</td>
                    </tr>
                     <tr class="A">
                        <td class="val">20</td>
                        <td class="val">21</td>
                        <td class="val">02</td>
                        <td class="val">03</td>
                        <td class="val">54</td>
                    </tr>
                     <tr class="A">
                        <td class="val">3</td>
                        <td class="val">2</td>
                        <td class="val">2</td>
                        <td class="val">1</td>
                        <td class="val">32</td>
                    </tr>

                </tbody>
            </table>
        </div>
    </td>
    <td>
        <table id="tbl3">
            <thead>
                <tr class="A">
                    <th class="A">Avg. grade</th>
                </tr>
            </thead>
            <tbody>

                <tr class="A">
                    <td class="B">0.45</td>    
                    <td class="B">0.236</td>
                    <td class="B">0.6</td>
                    <td class="B">0.98</td>
                    <td class="B">0.21</td>                              
                 </tr>
            </tbody>
        </table>
    </td>
</tr>

Answer 1

查看此示例

$('table').tablesorter();

    // using a flag that prevents recursion - repeatedly calling this same function,
    // because it will trigger the "sortEnd" event after sorting the other tables.
    var recursionFlag = false;

    // bind to table sort end event on ALL tables
    $("table").bind("sortEnd",function(e, table) {

        // ignore if the flag is set
        if (!recursionFlag) {
            recursionFlag = true;

            // find other tables to resort (but not the current one)
            // the current sort is stored in "table.config.sortList"
            $('table').not(this).trigger("sorton", [ table.config.sortList ]);

            // reset recursion flag after 1 second... so you can't sort faster
            // than that or it won't trigger the other tables
            // you can adjust this value; it all depends on how much data needs
            // to be sorted in the tables. Run the tablesorter with "debug:true"
            // to find out the times needed to sort (but do it in IE as it is
            // the slowest browser)
            setTimeout(function(){ recursionFlag = false; }, 1000);

        }
    });

在jquery中对多个表进行排序

1 个答案: