使用 tablesorter 对多个表进行排序

Question

我正在使用 jQuery tablesorter 插件来允许用户对我们网站上的数据表进行排序。我最近遇到了一个区域，使用 tablesorter 的多个表将显示在同一页面上，我对此没有任何问题，并且 tablesorter 插件运行良好。我们有几个用户要求能够同时对所有表进行排序，这很好，因为这些表都具有相同的结构，只是其中的数据不同。以下是表 1 的示例：

<table>
    <thead>
       <tr>
           <th>ID</th>
           <th>Name</th>
           <th>Age</th>
       </tr>
    </thead>
    <tbody>
       <tr>
           <td>1</td>
           <td>Bob</td>
           <td>24</td>
       </tr>
       <tr>
           <td>1</td>
           <td>James</td>
           <td>33</td>
       </tr>
    </tbody>
</table>

表 2 示例：

<table>
    <thead>
       <tr>
           <th>ID</th>
           <th>Name</th>
           <th>Age</th>
       </tr>
    </thead>
    <tbody>
       <tr>
           <td>5</td>
           <td>PJ</td>
           <td>28</td>
       </tr>
       <tr>
           <td>1</td>
           <td>Sue</td>
           <td>39</td>
       </tr>
    </tbody>
</table>

因此，您可以看到表格相似，但显示的数据不同。问题变成了我如何允许用户同时对所有表进行排序，但仍然让他们仍然单独对表进行排序，因为他们可能想要这样做。我们想出了一个想法，如果他们对页面上的第一个表进行排序，我们希望使用该事件作为我们希望以与第一个相同的排序结构对页面上的所有表进行排序的指示。我的主要问题是有人会怎么做？我认为我找到了完成这项工作的最佳区域，即表格排序器小部件，但似乎无法完成最后一块拼图。

这是我目前拥有的小部件和表格分类器注册码：

$(function() {

    $("table:not(:first)").tablesorter();

    $.tablesorter.addWidget({
        id: "tableForceSort",
        format: function (table) {
            if (table.config.sortList.length > 0) {
                $('table:not(:first)').trigger("sorton", table.config.sortList);
            }
        }
    });

    $("table:first").tablesorter({
        widgets: ['tableForceSort']
    });
});

如您所见，我将表格排序器添加到页面中的所有表格中，但对第一个表格进行单独注册，以便我可以向该表格添加特殊小部件以强制对其余表格进行排序在页面上。这一切都有效，当我实际尝试对表格进行排序并触发触发事件时，问题出现了，这导致页面中断，我似乎无法弄清楚原因。如果有人有解决此问题的方法或有关如何解决此问题的其他想法，请告诉我。

谢谢

Answer 1

尝试使用“sortEnd”事件...我必须添加一个标志来防止递归。希望我添加了足够多的 cmets，所以一切都有意义 (demo)。

$('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);

    }
});