Utilizing jQuery tablesorter in my UI, I encountered a challenge with a table that has 2 rows of headers - one main header and one subheader. My goal is to enable sorting on the subheader. How can I achieve this?
Below is an example of my code structure:
<table border="1">
<thead>
<tr>
<td> </td>
<td colspan="3" align="center">English</td>
<td colspan="3" align="center">Math</td>
<td colspan="3" align="center">Science</td>
</tr>
<tr>
<th>School Name</th>
<th>Test 1</th>
<th>Test 2</th>
<th>Test 3</th>
<th>Test 1</th>
<th>Test 2</th>
<th>Test 3</th>
<th>Test 1</th>
<th>Test 2</th>
<th>Test 3</th>
</tr>
</thead>
<tbody>
<tr>
<th>School 1</th>
<th>10</th>
<th>10</th>
<th>10</th>
<th>10</th>
<th>10</th>
<th>10</th>
<th>10</th>
<th>10</th>
<th>10</th>
</tr>
<tr>
<th>School 2</th>
<th>9</th>
<th>9</th>
<th>9</th>
<th>9</th>
<th>9</th>
<th>9</th>
<th>9</th>
<th>9</th>
<th>9</th>
</tr>
</tbody>