手风琴表排序手风琴表 - 可排序？答案

【问题标题】：Sorting Accordion Table of Accordion Tables - Sorttable?手风琴表排序手风琴表 - 可排序？
【发布时间】：2018-01-04 15:24:40
【问题描述】：

我正在尝试对带有可排序手风琴表的手风琴表进行排序！！！我真的很喜欢这种布局的外观，但弄清楚如何对其进行排序确实是一个挑战。

我已尝试使用此代码：Sortable Accordion Table 但这会对表格中的每个<tbody> 进行排序，包括子部分。

我真的很想使用 sorttable：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>

寻找如何改进这些排序的想法，然后一次只对我的表的一个级别进行排序。

【问题讨论】：

您确实需要提供更多信息或向我们展示您到目前为止所做的排序...此时您要求我们为您完成所有工作。
我已经提供了我尝试使用的两个来源。我不需要为我编写关于如何分解数据或如何格式化表格以允许一次仅对表格的一层进行排序的想法

标签： jquery html html-table accordion sorttable.js

【解决方案1】：

就个人而言，我只会将 DataTables 与嵌套表一起使用 - 基本上应该可以开箱即用。

这里有一个小提琴，它可以做你想做的事，而且默认情况下还包括一个“搜索”框： 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>

【讨论】：