Question

我正在尝试用可分类的手风琴表对一个手风琴表进行排序！我真的很喜欢这种布局看起来如何，但要弄清楚如何对它进行排序确实是一个挑战。

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

我真的想使用sorttable：JQuery Sorttable 这段代码很流畅，效果很好！但它在类似的事情中对表中的所有<tr>进行排序，而不只是＆＃34;未隐藏的那些＆＃34;，但它并没有排序超过该表级别。

这是指向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>

寻找如何优化这些排序的想法，然后一次只对我的表格进行排序。

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

对手风琴表的折叠表进行排序 - 可分类表？

1 个答案: