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

Nichellenichol

I don't think tablesorter supports sorting with rowspans. There's an open issue about it assuming this is the tablesorter you're talking about. – Antilogy

if it is not support, is there any alternative way to do sort with rowspan – Nichellenichol

Perhaps #12899451 may help – Antilogy

Just to clarify two points. 1. Pretending we change "Peter" to "Alan", and we sort on first name, do you want the results to split those first two lines? ie. answer is "Alan-28-AAA", "Bruce-22-CCC", "Clark-18-BBB", "John-33-AAA" (so no rowspans on country)? 2. Are you always collapsing on adjacent countries equal (regardless of sort field), or on the sorted field (eg sorting on age would create age rowspans)? – Correggio

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.

Redeploy

HI @Mottie, I don't see any sorting using your method. – Dobsonfly

Hi Dejan, try setting the debug option to troubleshoot. If that doesn't help, please ask a new question with your code in a demo. – Redeploy