使用tablesorter排序多個表

Question

我正在使用jQuery tablesorter插件來允許用戶對我們網站上的數據表進行排序。我最近遇到了一個區域，使用tablesorter的多個表將在同一頁面上顯示，我沒有任何麻煩，而且這個tablesorter插件工作得很好。我們有幾個用戶的請求可以同時對所有表進行排序，這很好，因爲這些表都具有相同的結構，只是它們中的數據不同。下面是表1的例子：

爲表2

<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> 

實施例：

<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註冊碼：

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

正如你可以看到我添加的tablesorter所有表中的頁碼，但做一個單獨的註冊的第表格，以便我可以向該表格添加一個特殊的小部件，以強制對頁面上其餘表格進行排序。這一切都有效，當我真正嘗試對錶進行排序並觸發觸發器事件時，問題就出現了，這會導致頁面中斷，我似乎無法找出原因。如果有人有辦法解決這個問題或者其他一些關於如何解決這個問題的想法，請讓我知道。

感謝使用「sortEnd」事件......我不得不添加一個標誌，以防止遞歸

Answer 1

嘗試。希望我添加了足夠的意見，所以這一切都很有意義（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); 

    } 
});