如何将表格分拣器应用于表格中的嵌套标题？

Question

在单个表中tablesorter功能工作正常。但我很困惑应用表分类器为以下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> 

像上面我的表设计是available.I想应用分拣机功能。

如果我正在将排序功能应用于“maintbl”子表的记录没有排序。 我需要根据maintbl headers对记录进行排序。按照maintbl values排序子表。我的意思是只需要根据maintbl对值进行排序。如何做到这一点？

Answer 1

共享的HTML标记将不能工作，因为子表是在一排只有一个TD和不再合并单元格...这里是怎么样，我想，该标记应该（demo）：

HTML（只显示一个条目）

<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> 

脚本

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

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