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>

如上所述，我的表设计可用。我想应用分拣机功能。

如果我将排序功能应用于＆＃34; maintbl＆＃34;子表记录没有订购。我需要根据maintbl headers.how对记录进行排序，以根据maintbl值对子表进行排序。我的意思是需要仅根据maintbl对值进行排序。如何做到这一点？

Answer 1

共享HTML标记不起作用，因为子表只有一个td而没有colspan ......我认为标记应该是这样的（demo）：< / p>

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']
    });
});

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

1 个答案: