CODEWITHSUNDEEP
jquerycsstablesorter
Yaco Zaragoza
Yaco Zaragoza

Reputation: 437

How to sort by Table SubHeadings with Jquery

I am using jQuery tablesorter in my UI. I have a scenario where I have a table with 2 rows of headers. A main Header and a subheader. I want to add sorting to the subheader. How can i do that.

this is how my code looks like,

<table border="1">
<thead>
<tr>
    <td>&nbsp;</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>

Upvotes: 1

Views: 336

Answers (1)

Mottie
Mottie

Reputation: 86423

That should just work out-of-the-box for tablesorter.

Here is a demo using the original version of tablesorter.

And here is a demo using my fork of tablesorter.

$(function () {
    $('table').tablesorter({
        theme: 'blue',
        widgets: ['zebra']
    });
});

In both cases, having th's in the tbody messes up the styling of the table. So, it would be better to use td's in the tbody.

Also you'll note the difference between the original and the fork... clicking on the main header in the fork sorts all of the columns contained within it. You can disable this by adding a "sorter-false" class to the main header cell. The original plugin ignores the click.

Upvotes: 1

Related Questions