Sorting Accordion Table of Accordion Tables - Sorttable?

Question

I am trying to sort an accordion table with sortable accordion tables inside!!! I really like how this layout looks but it has really been a challenge to figure out how to sort it.

I've tried working with this code: Sortable Accordion Table but this sorts EVERY <tbody> in the table, including the sub-pieces.

I would really like to use sorttable: JQuery Sorttable This code is smooth and works great! But it does a similar thing where it sorts ALL <tr> in that table, not just the "unhidden ones", but it doesn't sort past that table level.

Here is a link to Codepen to see a general layout of my table. Or for a very simple version:

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

Looking for ideas of how to refine these sorts to make then only sort one level of my table at a time.

Answer 1

Personally, I would just use DataTables with nested tables - should work basically out of the box.

Here is a fiddle that does exactly what you want to do with an added bonus of also including a "search" box by default: 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>