정렬 <table>의

Question

I 정렬 할 필요가

내 <table> 그룹화 여러 <tbody>로의

그것은 꽤 똑바로 앞으로이고 다음과 같습니다 : I는 각 목록을 그룹화하고있어

<table> 
    <thead> 
     <tr> 
      <th>Header 1</th> 
      <th>Header 2</th> 
     </tr> 
    </thead> 
    <tbody class="listing-1"> 
     <tr> 
      <td>Blue widget</td> 
      <td>1</td> 
     </tr> 
     <tr> 
      <td colspan="2">text</td> 
     </tr> 
    </tbody> 
    <tbody class="listing-2"> 
     <tr> 
      <td>Red Widget</td> 
      <td>2</td> 
     </tr> 
     <tr> 
      <td colspan="2">text</td> 
     </tr> 
    </tbody> 
    <tbody class="listing-3"> 
     <tr> 
      <td>Blue widget</td> 
      <td>3</td> 
     </tr> 
     <tr> 
      <td colspan="2">text</td> 
     </tr> 
    </tbody> 
</table> 

<tbody> 두 <tr>이 각각 <tbody>에 잠긴 테이블을 정렬하려고합니다. 봤는데

<table> 
    <thead> 
     <tr> 
      <th>Header 1</th> 
      <th>Header 2</th> 
     </tr> 
    </thead> 
    <tbody class="listing-1"> 
     <tr> 
      <td>Blue widget</td> 
      <td>1</td> 
     </tr> 
     <tr> 
      <td colspan="2">text</td> 
     </tr> 
    </tbody> 
    <tbody class="listing-3"> 
     <tr> 
      <td>Blue widget</td> 
      <td>3</td> 
     </tr> 
     <tr> 
      <td colspan="2">text</td> 
     </tr> 
    </tbody> 
    <tbody class="listing-2"> 
     <tr> 
      <td>Red Widget</td> 
      <td>2</td> 
     </tr> 
     <tr> 
      <td colspan="2">text</td> 
     </tr> 
    </tbody> 
</table> 

: 나는 일종의 헤더 1 위에 블루 위젯과 <td> 년대를 얻을 경우처럼 보이는 있도록

, 나는, 이동 각 <tbody>의 전체 필요 ListJS (http://listjs.com/)를 사용하여 테이블을 정렬하지만 tbody의 그룹화를 지원하지 않습니다. 그런 다음 TableSorter (https://mottie.github.io/tablesorter/)를 체크 아웃했지만 그 중 하나를 지원하지 않습니다.

나는 이것을 정렬하는 방법을 놓치고 있지만, 나는 이런 식으로하고 싶은 사람이 될 수 없다고 생각하고있다. 어쩌면 내가 잘못된 질문을하고있을거야?

이 작업을 수행하는 방법이나 사용하려는 플러그인에 대한 도움이나 제안은 정말 대단합니다.

EDIT : 정렬 기준은 각 항목의 첫 번째 항목입니다. 두 번째 항목은 각각 첫 번째 항목과 함께 잠그고 정렬 할 필요가 없습니다. 따라서 두 번째는 정렬 할 수있는 것이 아니라 첫 번째로 고정되어야합니다.

아직 자신을 분명히하지 않으면 알려주세요. 다시 시도하겠습니다.

Answer 1

정렬 기준이 무엇인지는 명확하지 않습니다. 무엇을 기준으로

var $tBodies = $('tbody').sort(function(a, b){  
 
     var aVal = +($(a).find('tr:first td').eq(1).text().trim() || 0); 
 
     var bVal = +($(b).find('tr:first td').eq(1).text().trim() || 0);    
 
     return aVal - bVal; 
 
    }); 
 
    
 
    $('table').append($tBodies);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<table> 
 
    <thead> 
 
     <tr> 
 
      <th>Header 1</th> 
 
      <th>Header 2</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody class="listing-1"> 
 
     <tr> 
 
      <td>Blue widget</td> 
 
      <td>1</td> 
 
     </tr> 
 
     <tr> 
 
      <td colspan="2">text</td> 
 
     </tr> 
 
    </tbody> 
 
    <tbody class="listing-3"> 
 
     <tr> 
 
      <td>Blue widget</td> 
 
      <td>3</td> 
 
     </tr> 
 
     <tr> 
 
      <td colspan="2">text</td> 
 
     </tr> 
 
    </tbody> 
 
    <tbody class="listing-2"> 
 
     <tr> 
 
      <td>Red Widget</td> 
 
      <td>2</td> 
 
     </tr> 
 
     <tr> 
 
      <td colspan="2">text</td> 
 
     </tr> 
 
    </tbody> 
 
</table>