排序 Accordion Table of Accordion Tables - 可排序？

Question

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

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

我真的很想使用排序table：JQuery Sorttable 这段代码很流畅，效果很好！但它做了类似的事情，它对 table 中的所有 <tr> 进行排序，而不仅仅是 "unhidden ones"，但它不会超过 table 级别。

这里有一个link到Codepen看我的table的大体布局。或者对于一个非常简单的版本：

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

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

Answer 1

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

这是一个 fiddle，它完全符合您的要求，而且默认情况下还包括一个 "search" 框： 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>

排序 Accordion Table of Accordion Tables - 可排序？

Sorting Accordion Table of Accordion Tables - Sorttable?

html

jquery

html-table

accordion

sorttable.js