jQuery tablesorter issue - sorting with rowspan

Question

I'm using jQuery tablesorter on my table. Without rowspan, the table sorts fine, but when I add rowspan, the sorting destroys my table layout.

Here's some sample code:

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

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

Without clicking sort, my table looks like this:

When I click on country header, the table gets really garbledL

Answer 1

One "simple" solution would be to make all rows that are included in the rowspan a child row:

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

  Initialize JS

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

• Tablesorter fork (demo) - class name was changed in the fork

  <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'
    });
  });
  

Because of the rowspan being set as child rows, they won't be included in the sort nor will they switch places with the parent.