Сортировка Аккордеонных Таблиц Аккордеонных Столов - Сортируемая?
Я пытаюсь отсортировать аккордеонный стол с сортируемыми аккордеонными столами внутри!!! Мне очень нравится, как выглядит этот макет, но было непросто понять, как его отсортировать.
Я пытался работать с этим кодом: 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>
Нужны идеи о том, как улучшить эти сортировки, чтобы затем сортировать только один уровень моей таблицы за раз.
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>