Fatal编程技术网
  • jquery/
  • Jquery 排序手风琴表的手风琴表-可排序？

Jquery 排序手风琴表的手风琴表-可排序？

jquery html

Jquery 排序手风琴表的手风琴表-可排序？,jquery,html,html-table,accordion,sorttable.js,Jquery,Html,Html Table,Accordion,Sorttable.js,我正在尝试分类一个里面有可分类手风琴表的手风琴表！！！我真的很喜欢这个布局的外观，但弄清楚如何对它进行排序确实是一个挑战 我已尝试使用以下代码： 但这会对表中的每个进行排序，包括子项 我很想使用sorttable： 这段代码很流畅，效果很好！但它做了一个类似的事情，它对该表中的所有进行排序，而不仅仅是“未隐藏的”，但它不会排序超过该表级别 这里有一个链接，可以查看我的表格的总体布局。或者对于非常简单的版本： <table class="fold-table"> <thead

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

我已尝试使用以下代码： 但这会对表中的每个
进行排序，包括子项

我很想使用sorttable： 这段代码很流畅，效果很好！但它做了一个类似的事情，它对该表中的所有
进行排序，而不仅仅是“未隐藏的”，但它不会排序超过该表级别

这里有一个链接，可以查看我的表格的总体布局。或者对于非常简单的版本：

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


单位
数量
公司名称
457
单位
数量
公司名称
457
公司名称
客户号
索尼
13245
索尼
13288
公司名称
457
公司名称
客户号
索尼
13245
索尼
13288
公司名称
457
单位
数量
公司名称
457
公司名称
客户号
索尼
13245
索尼
13288
公司名称
457
公司名称
客户号
索尼
13245
索尼
13288
我正在寻找如何改进这些排序的方法，以便一次只对我的表进行一级排序。

就我个人而言，我只会将数据表与嵌套表一起使用，这基本上是开箱即用的

这里有一把小提琴，它可以做你想做的事情，并且在默认情况下还包括一个“搜索”框： 



这是一个示例，说明了如何使用Datatables设置主/详细信息关系和嵌套详细信息视图，这些视图可以是完全不同的表。




《星际争霸2》节目表| 2014
比赛
年
全部的
照片
名称
团队
服务器
您确实需要提供更多信息，或向我们展示您迄今为止在排序方面所做的工作。。。在这一点上，你要求我们为你做所有的工作。我已经提供了我试图使用的两个来源。我不需要为自己编写一个，只需要了解如何分解数据或如何格式化表格，以便一次只对表格的一个级别进行排序 
<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>