CODEWITHSUNDEEP
jqueryhtml-tabletablesorter
Jasir alwafaa
Jasir alwafaa

Reputation: 586

jQuery tablesorter issue - sorting with rowspan

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:

Without Sorting

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

With Sorting

Upvotes: 9

Views: 2657

Answers (1)

Mottie
Mottie

Reputation: 86413

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.

Upvotes: 8

Related Questions