使用表排序器对多个表进行排序 [英] Sorting multiple tables with tablesorter

问题描述

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

I'm using the jQuery tablesorter plugin to allow users to sort tables of data on our site. I recently came across an area where multiple tables using the tablesorter were going to be displayed on the same page, I didn't have any troubles with this and the tablesorter plugin worked great. We had a request by a few users to be able to sort all tables at the same time, which is fine since the tables all have the same structure just different data in them. Here is an example for table 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>

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

So as you can see the table are similar but displaying different data. The problem became how do I allow users to sort all tables at the same time, but let them still sort tables separately as well, since they might want to do that. We came up with the idea of if they sort the first table on the page we'd like to use that event as our indication they want to sort all the tables on the page in the same sorting structure as the first. My main question is how would someone go about doing this? I think I found the best area to make this work, tablesorter widgets, but can't seem to get that last piece of the puzzle in place.

这是我当前用于小部件和表分类器注册代码的内容:

Here is what I currently have for my widget and tablesorter registration code:

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

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

As you can see I'm adding the tablesorter to all tables in the page, but doing a separate registration for the first table so that I can add a special widget to that table to force the sort on the rest of the tables on the page. This all works, the problem appears for me when I actually try to sort the table and it fires the trigger event, this causes the page to break and I can't seem to figure out why. If anyone has some way to fix this or some other ideas on how to solve this problem please let me know.

谢谢

推荐答案

尝试使用"sortEnd"事件...我必须添加一个标志以防止递归.希望我添加了足够的注释，这样才有意义(演示).

Try using the "sortEnd" event... I had to add a flag to prevent recursion. Hopefully I added enough comments so it all makes sense (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);

    }
});

这篇关于使用表排序器对多个表进行排序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！