Footable sorting with colspan rows - footable

Question

I have a sorting issue when using rows with colspans when sorting a Footable table.
My table structure:
<table class="table footable">
<thead>
<tr>
<th>Name</th>
<th data-type="numeric">Date of Birth</th>
<th>Country</th>
</tr>
<thead>
<tbody>
<tr>
<td>Bill Smith</td>
<td data-value="315532800">1/1/1980</td>
<td>England</td>
</tr>
<tr>
<td colspan="3">Some long description of Bill<td>
</tr>
<!-- Many, many other rows -->
</tbody>
</table>
I have a checkbox to toggle the colspan rows on/off, but if they're displayed and you sort by a column, all the colspan rows are grouped together.
JSFiddle demo
Is there a way to sort that correctly places the colspan (description) row beneath the correct data row?

Answer 1

I've managed to solve this with Javascript (using jQuery).
Basically I'm hiding the "description" rows by default (in CSS), I have a checkbox to toggle their visibility.
My javascript hooks into Footable's sorted (after sorting) event and basically moves the description rows around so they're always below the "data" row.
$('#details').footable().bind({
'footable_sorted': function(e) {
var rows = $('#details tbody tr.data');
rows.each(function()
{
var personid = $(this).data('row-person');
var detail = $('#details tbody tr.descriptions[data-detail-person="'+ personid +'"]');
$(detail).insertAfter($(this));
});
}
});
I also had to add additional markup to my table (classes/ids) to enable this.
See my Fiddler demo for full details.
Tested with up to 370 rows and gives acceptable performance.
I'm sure my HTML/JS could be stream-lined further.

Answer 2

So the root of the problem is that the description row is a separate row and is not "linked" with the data row above it. The only way a user would know what data row the description row belongs to is the order of the rows. Once you sort the table, the order changes and you can no longer count on the order to link the data and description rows. (Wow that's kind of hard to read. My apologies in advance...)
So, one way to solve this is to have the data and description rows both contained in the same row.
<table>
<thead>
<tr>
<th>Name</th>
<th data-type="numeric">Date of Birth</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<table>
<tr>
<td>Bill Smith</td>
<td data-value="315532800">1/1/1980</td>
<td>England</td>
</tr>
<tr>
<td colspan="3">Some long description of Bill</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table>
<tr>
<td>John Smith</td>
<td data-value="315532800">1/1/1980</td>
<td>France</td>
</tr>
<tr>
<td colspan="3">Some long description of John</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
Here's a plunk that shows this in action: http://plnkr.co/edit/NvmUgzvaAix1x7WUGYSM

Answer 3

This is a fix for rows with colspan: $('table.footable').find('td[colspan]').siblings().remove();