how to apply table sorter for nested headers in table?

Question

in a single table the tablesorter functionality working fine.But i am confusing to apply the table sorter for the below scnario.

ID  Name    Phone
1   vasu    4562789
Role    status  submitted
admin   completed   yes
user    notcompleted    no
2   venkat  78979789
Role    status  submitted
admin   completed   yes
3   balu    768792
Role    status  submitted
user    completed   yes
4   jj  897422
Role    status  submitted
user    completed   no



<script type="text/javascript">
  $("#maintbl").tablesorter();
</script>
<table class="tablesorter" id="maintbl">
<thead>
  <th>id</th>
  <th>name</th>
  <th>phone</th>
  <thead> 
<tbody>
<tr>
  <td><%: id%></td>
  <td><%: name%></td>
<td><%: phone%></td>
</tr>
<tr>
<td>
<table id="childtbl">
<thead>
  <th>appid</td>
  <th>appname</th>
</thead>
<tr>
 <td><%: appid%></td>
 <td><%: appname%></td>
</tr>
</table>  
</td>
</tr>
</table>

like the above my table design is available.I want to apply the sorter functionality.

If i am applying the sorting functionality to "maintbl" the child tables records are not ordering . I need to sort records based on maintbl headers.how to sort the childtable according the maintbl values.i mean need to sort the values based on maintbl only.how to do this?

Answer 1

The shared HTML markup won't work because the child table is in a row with only one td and no colspan... Here is how, I think, the markup should look like (demo):

HTML (showing only one entry)

<table class="tablesorter" id="maintbl">
    <thead>
        <th>id</th>
        <th>name</th>
        <th>phone</th>
    </thead>
    <tbody>

        <!-- one parent + child row containing a child table -->
        <tr>
            <td>1</td>
            <td>vasu</td>
            <td>4562789</td>
        </tr>
        <tr class="tablesorter-childRow">
            <td colspan="3">
                <table class="childtbl">
                    <thead>
                        <th>Role</th>
                        <th>Status</th>
                        <th>Submitted</th>
                    </thead>
                    <tbody>
                        <tr>
                            <td>admin</td>
                            <td>completed</td>
                            <td>yes</td>
                        </tr>
                        <tr>
                            <td>user</td>
                            <td>notcompleted</td>
                            <td>no</td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>

    </tbody>
</table>

Script

$(function(){
    $('#maintbl').tablesorter({
        theme: 'blue',
        sortList: [[1, 0]],
        widgets: ['zebra', 'columns']
    });

    $('.childtbl').tablesorter({
        theme: 'blue',
        sortList: [[0, 0]],
        widgets: ['zebra', 'columns']
    });
});