jquery 使用tablesorter对多个表进行排序

ig9co6j1 于 2023-10-17 发布在 jQuery

关注(0)|答案(2)|浏览(110)

我正在使用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>

正如你所看到的，表格是相似的，但显示不同的数据。问题变成了我如何允许用户同时对所有表进行排序，但也让他们单独对表进行排序，因为他们可能想这样做。我们想出了这样一个想法：如果他们对页面上的第一个表进行排序，我们希望使用该事件作为我们的指示，他们希望以与第一个表相同的排序结构对页面上的所有表进行排序。我的主要问题是，有人会如何做这件事？我想我找到了最好的地方，使这项工作，表排序器小部件，但似乎不能得到最后一块拼图的地方。
以下是我目前拥有的widget和tablesorter注册码：

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

正如您所看到的，我将表排序器添加到页面中的所有表中，但对第一个表进行单独的注册，以便我可以向该表添加一个特殊的小部件，以强制对页面上的其余表进行排序。这一切工作，问题出现在我，当我实际尝试排序表，它触发触发事件，这导致页面中断，我似乎不能找出原因。如果任何人有一些方法来解决这个问题或一些其他的想法如何解决这个问题，请让我知道。
谢谢

jquery

来源：https://stackoverflow.com/questions/8143623/sorting-multiple-tables-with-tablesorter

2条答案

按热度按时间

ozxc1zmp1#

尝试使用“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);

    }
});

赞(0）回复(0）举报 2023-10-17

r55awzrz2#

（@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]);
});

赞(0）回复(0）举报 2023-10-17

我来回答

jquery 使用tablesorter对多个表进行排序

2条答案

相关问题

热门标签

最新问答