'jQuery Tablesorter - Sort with colspan
Tablesorter and jQuery
I use http://tablesorter.com/docs/ for a project.
Information
I have merged / colspaned two column headers into one. That means one sorting of the third column is missing.
jsFiddle
Question
Can I force to add the sorting of the last column back into the merged / colspaned header?
HTML (if jsFiddle don't work)
<p>
<strong>This works</strong>
</p>
<table class="tablesorter">
<thead>
<tr>
<th>Heading1</th>
<th>Heading2</th>
<th>Heading3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data1a</td>
<td>Data2a</td>
<td>Data3a</td>
</tr>
<tr>
<td>Data1b</td>
<td>Data2b</td>
<td>Data3b</td>
</tr>
</tbody>
</table>
<p>
<strong>Can this work?</strong><br>
Another arrow should be added for sorting the "Data3" column
</p>
<table class="tablesorter">
<thead>
<tr>
<th>Heading1</th>
<th colspan="2">? Heading2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data11</td>
<td>Data2c</td>
<td>Data3a</td>
</tr>
<tr>
<td>Data12</td>
<td>Data2b</td>
<td>Data3b</td>
</tr>
<tr>
<td>Data13</td>
<td>Data2a</td>
<td>Data3c</td>
</tr>
</tbody>
</table>
Inline jQuery (in case jsFiddle don't work)
$(document).ready(function() {
$("table").tablesorter({
});
});
Solution 1:[1]
As far as I know, there is no need to change much.
Just change your second HTML as follows to achieve your wish:-
<table class="tablesorter2">
<thead>
<tr>
<th rowspan="2">Heading1</th>
<th colspan="2">Heading 2 and 3</th>
</tr>
<tr>
<th>Heading2</th>
<th>Heading3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data11</td>
<td>Data2c</td>
<td>Data3a</td>
</tr>
<tr>
<td>Data12</td>
<td>Data2b</td>
<td>Data3b</td>
</tr>
<tr>
<td>Data13</td>
<td>Data2a</td>
<td>Data3c</td>
</tr>
</tbody>
</table>
Refer LIVE DEMO
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | Siva Charan |
