Jquery tablesorter Problem mit Tabelle rowspan

Question

Ich habe jquery tablesorter auf meine Tabelle angewendet, ohne rowspan funktioniert es gut, aber wenn ich rowspan zu meiner Tabelle sortiere nur meine Tabelle zu zerstören sortiere. nur zerstören seinen Stil

$(".tablesorter").tablesorter({ 
});  

<table cellspacing="1" class="tablesorter"> 
      <thead> 
        <tr> 
         <th>First Name</th> 
         <th>Age</th> 
         <th>Country</th> 
        </tr> 
       </thead> 
       <tbody> 
        <tr> 
         <td>Peter</td> 
         <td>28</td> 
         <td rowspan="2" style="vertical-align:middle">AAA</td> 
        </tr> 
        <tr> 
         <td>John</td> 
         <td>33</td> 
        </tr> 
        <tr> 
         <td>Clark</td> 
         <td>18</td> 
         <td>BBB</td> 
        </tr> 

        <tr> 
         <td>Bruce</td> 
         <td>22</td> 
         <td>CCC</td> 
        </tr> 
       </tbody> 
      </table> 

ohne meinen Tisch sortieren aussehen zu klicken wie

Wenn ich auf Land Header-Tabelle klicken.

Answer 1

Eine "einfache" Lösung wäre, alle Zeilen zu machen, die in der rowspan ein Kind Reihe enthalten sind:

• Original-tablesorter (demo)

  <tr> 
      <td>Peter</td> 
      <td>28</td> 
      <td rowspan="2" style="vertical-align:middle">AAA</td> 
  </tr> 
  <tr class="expand-child"> 
      <td>John</td> 
      <td>33</td> 
  </tr> 
  

  initialisieren JS

  $(function() { 
      $('table').tablesorter(); 
  }); 
  

• Tablesorter Gabel (demo) - Klassenname in der Gabel

  <tr> 
      <td>Peter</td> 
      <td>28</td> 
      <td rowspan="2" style="vertical-align:middle">AAA</td> 
  </tr> 
  <tr class="tablesorter-childRow"> 
      <td>John</td> 
      <td>33</td> 
  </tr> 
  

  initialisieren JS

  $(function() { 
      $('table').tablesorter({ 
      theme: 'blue' 
      }); 
  }); 
  

Wegen der rowspan gesetzt wird als Kind Zeilen geändert wurde, gewannen sie‘ t werden in die Sortierung einbezogen und wechseln nicht mit den Eltern.