Jquery tablesorter issue with table rowspan

Question

Я применил jquery tablesorter к таблице, без rowspan, что он работает нормально, но когда я добавляю rowspan для таблицы, сортируя только разрушая мою таблицу.

$(".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> 

без щелчка сортировать мой стол выглядеть

Когда я нажимаю на столе заголовка страны только уничтожив его стиль.

Answer 1

Один "простое" решение было бы сделать все строки, которые включены в rowspan дочернюю строку:

• Оригинал 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> 
  

  Initialize JS

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

• Tablesorter вилка (demo) - имя класса был изменен в вилке

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

  Initialize JS

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

Из-за RowSpan задается как дочерние строки, они выиграли» t быть включенным в сортировку, и они не будут переключаться с родителями.