使用tablesorter对多个表进行排序

Question

我正在使用 jQuery 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”事件...我必须添加一个标志来防止递归。希望我添加了足够的评论，以便这一切都有意义（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);

    }
});

Answer 2

（@ajrawson）的解决方案很好，但如果超时超过毫秒数，可能会导致递归问题。以下代码示例适用于版本 (2.31.3)。

示例 1：在通用表上使用初始作者的代码

    // Event handler for clicking on a table header
    $('body').on('click', 'table thead th', function() {

        // Get the current sort list
        var thisTableConfig = $(this).closest('table')[0].config.sortList;

        // Trigger a sorton event to all tables, passing the new sort list
        $('table').trigger('sorton', [thisTableConfig]);
    });

示例 2： 使用“tablesorter”类名调用 Tablesorter 库来处理表

    // Event handler for clicking on a (.tablesorter) table header
    $('body').on('click', '.tablesorter thead th', function() {

        // Get the current sort list
        var thisTableConfig = $(this).closest('table')[0].config.sortList;

        // Trigger a sorton event to all (.tablesorter) tables, passing the new sort list
        $('.tablesorter').trigger('sorton', [thisTableConfig]);
    });