如何申请表分拣机表嵌套的头？ [英] how to apply table sorter for nested headers in table?

问题描述

在一个表中的tablesorter功能工作fine.But我很困惑申请表分拣机下面scnario。

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>

像上面我的桌子的设计是available.I想申请分拣机的功能。

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

如果我申请maintbl子表中的记录没有订购排序功能。
我需要根据maintbl headers.how来记录进行排序排序根据childtable的maintbl values​​.i意味着需要only.how做到这一点的基础上maintbl的值进行排序？

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?

推荐答案

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

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（只显示一个条目）

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>

剧本

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

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

这篇关于如何申请表分拣机表嵌套的头？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！