我正在尝试对手风琴表进行排序，里面有可排序的手风琴表!!我真的很喜欢这个布局的外观，但弄清楚如何对它进行排序确实是一个挑战。
我尝试使用此代码： 可排序手风琴表但这会对表中的每个<tbody>进行排序，包括子部分。
我真的很想使用排序表：JQuery Sorttable这段代码很流畅，效果很好！但它做了类似的事情，它对该表中的所有<tr>进行排序，而不仅仅是"未隐藏的"，但它不会排序超过该表级别。
这是指向 Codepen 的链接，用于查看我的表格的总体布局。或者对于一个非常简单的版本：
<table class="fold-table">
<thead>
<tr>
<th>Company</th>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr class="view">
<td>Company Name</td>
<td class="pcs">457</td>
</tr>
<tr class="fold">
<td colspan="7">
<div class="fold-content">
<table class="fold-table">
<thead>
<tr>
<th>Company</th>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr class="view">
<td>Company Name</td>
<td class="pcs">457</td>
</tr>
<tr class="fold">
<td colspan="7">
<div class="fold-content">
<table>
<thead>
<tr>
<th>Company name</th>
<th>Customer no</th>
</tr>
</thead>
<tbody>
<tr>
<td>Sony</td>
<td>13245</td>
</tr>
<tr>
<td>Sony</td>
<td>13288</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
<tr class="view">
<td>Company Name</td>
<td class="pcs">457</td>
</tr>
<tr class="fold">
<td colspan="7">
<div class="fold-content">
<table>
<thead>
<tr>
<th>Company name</th>
<th>Customer no</th>
</tr>
</thead>
<tbody>
<tr>
<td>Sony</td>
<td>13245</td>
</tr>
<tr>
<td>Sony</td>
<td>13288</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
<tr class="view">
<td>Company Name</td>
<td class="pcs">457</td>
</tr>
<tr class="fold">
<td colspan="7">
<div class="fold-content">
<table class="fold-table">
<thead>
<tr>
<th>Company</th>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr class="view">
<td>Company Name</td>
<td class="pcs">457</td>
</tr>
<tr class="fold">
<td colspan="7">
<div class="fold-content">
<table>
<thead>
<tr>
<th>Company name</th>
<th>Customer no</th>
</tr>
</thead>
<tbody>
<tr>
<td>Sony</td>
<td>13245</td>
</tr>
<tr>
<td>Sony</td>
<td>13288</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
<tr class="view">
<td>Company Name</td>
<td class="pcs">457</td>
</tr>
<tr class="fold">
<td colspan="7">
<div class="fold-content">
<table>
<thead>
<tr>
<th>Company name</th>
<th>Customer no</th>
</tr>
</thead>
<tbody>
<tr>
<td>Sony</td>
<td>13245</td>
</tr>
<tr>
<td>Sony</td>
<td>13288</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
寻找有关如何优化这些排序的想法，然后一次只对我的表的一个级别进行排序。
就个人而言，我只会将数据表与嵌套表一起使用 - 应该基本上开箱即用。
这是一个小提琴，它完全可以做你想做的事情，还有一个额外的好处，默认情况下还包括一个"搜索"框：http://jsfiddle.net/headwinds/zz3cH/
<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/css/jquery.dataTables_themeroller.css">
<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/jquery.dataTables.min.js"></script>
<p>
This is an example of how you can use Datatables to setup a master/detail relationship and nest details views which can be completely different tables.
</p>
<br />
<h4>Starcraft 2 Progamers | 2014</h4>
<table id="exampleTable">
<thead>
<tr>
<th>Race</th>
<th>Year</th>
<th>Total</th>
</tr>
</thead>
<tbody></tbody>
</table>
<div style="display:none">
<table id="detailsTable">
<thead>
<tr>
<th>Photo</th>
<th>Name</th>
<th>Team</th>
<th>Server</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>