Trier <table> par plusieurs <tbody> « s

Question

je dois trier mes <table> par groupées multiples <tbody> » s

Il est assez en avant et regarde droit comme ceci:

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

Je groupant chaque liste dans un et que vous souhaitez trier le tableau ayant les deux <tr> dans chaque <tbody> verrouillé ensemble.

Si je sorte par l'en-tête 1 pour obtenir le « s avec <td> widget Blue sur le dessus, je dois l'ensemble de chaque <tbody> pour déplacer vers le haut, il ressemble à:

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

Je suis en utilisant ListJS (http://listjs.com/) pour trier mes tables, mais cela ne semble pas supporter le groupement de tbody comme ceci. J'ai ensuite vérifié TableSorter (https://mottie.github.io/tablesorter/), mais cela ne semble pas le soutenir non plus. Je ne sais pas comment trier cela, mais je pense que je ne peux pas être le seul à vouloir faire quelque chose comme ça. Peut-être que je pose la mauvaise question?

Toute aide ou suggestion sur la façon de procéder ou sur le plugin à utiliser serait vraiment géniale.

EDIT: Les critères de tri sont les premiers de chacun dans chacun. Les deuxièmes dans chaque doivent être verrouillés ensemble avec le premier dans chacun, et non triable. Donc la seconde n'est jamais censée être triable, mais devrait plutôt être verrouillée avec la première. Faites-moi savoir si je ne suis toujours pas clair, et je vais essayer à nouveau.

Answer 1

Les critères de tri ne sont pas très clairs. Si l'on suppose qu'il est le numéro dans la deuxième cellule peut faire quelque chose comme:

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>