tablesorter로 여러 테이블 정렬

Question

jQuery tablesorter 플러그인을 사용하여 사용자가 사이트의 데이터 테이블을 정렬 할 수 있도록했습니다. 나는 최근에 tablesorter를 사용하는 여러 테이블이 같은 페이지에 표시 될 영역을 발견했는데, 이것에 문제가 없었으며 tablesorter 플러그인이 훌륭하게 작동했습니다. 우리는 몇 명의 사용자가 동시에 모든 테이블을 정렬 할 수 있도록 요청했습니다. 테이블은 모두 동일한 구조를 가지므로 다른 테이블에있는 데이터 만 사용할 수 있습니다. 표 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> 

그래서 테이블을 볼 수는 비슷하지만 다른 데이터를 표시 할 수 있습니다 여기에 표 1의 예입니다. 문제는 사용자가 동시에 모든 테이블을 정렬하도록 허용하는 방법이되었지만 그렇게하고 싶을 수 있기 때문에 테이블을 별도로 정렬 할 수있게되었습니다. 페이지에서 첫 번째 테이블을 정렬하면 해당 이벤트를 첫 번째 테이블과 동일한 정렬 구조로 페이지의 모든 테이블을 정렬하려는 표시로 사용하려는 아이디어가 떠 올랐습니다. 나의 주된 질문은 누군가 어떻게이 일을 행하는가? 이 작업을 수행하기에 가장 좋은 영역 인 위저드를 찾은 것 같지만 그 마지막 조각을 제자리에 놓을 수는없는 것 같습니다. 여기

내가 현재 내 위젯 및 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); 

    } 
});