Footable 具有colspan行的可移动排序

在对表进行排序时，如果使用带有colspan的行，则会出现排序问题

我的表格结构：

名称
出生日期
国家
比尔·史密斯
1/1/1980
英格兰
对账单的详细描述

所以问题的根源在于描述行是一个单独的行，并且没有与上面的数据行“链接”。用户知道描述行所属的数据行的唯一方法是行的顺序。对表进行排序后，顺序会发生变化，您不能再依靠顺序来链接数据行和描述行。（哇，这有点难懂。我提前道歉…）

因此，解决这个问题的一种方法是将数据行和描述行都包含在同一行中

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

名称
出生日期
国家
比尔·史密斯
1/1/1980
英格兰
对账单的详细描述
约翰·史密斯
1/1/1980
法国
对约翰的详细描述

---

这里有一个例子说明了这一点：

我已经用Javascript（使用jQuery）解决了这个问题

基本上，我在默认情况下隐藏了“description”行（在CSS中），我有一个复选框来切换它们的可见性

我的javascript钩住Footable的排序（排序后）事件，基本上移动描述行，使它们始终位于“数据”行下方

我还必须向表中添加额外的标记（类/ID）以启用此功能

有关详细信息，请参阅我的

最多可测试370行，性能可接受。

---

我确信我的HTML/JS可以进一步流式排列。

这是对colspan:$（'table.footable'）.find（'td[colspan]'）.sides（）.remove（）行的修复

你能提供一个plunk或JSFIDLE来演示这个问题吗？@Jeff-添加了JSFIDLE demo-按任何列排序使描述行组合在一起，而不是保持与相应数据行的“连接”我正在考虑一个解决方案。问题是描述位于单独的行上，因此无法将其与上面的行保持关联。我还不知道怎么做，但解决方案可能是将描述行移到它上面的行。@Jeff-，这似乎可以做到这一点（不知道怎么做），我将看看如何将我的表转换为使用这个插件，在这个插件中，这个功能很重要。我下面的答案将适用于Footable，但您已经使我对DataTables的兴趣达到顶峰。我很久以前就看过了，决定不使用它。现在我必须再次检查它，看看是否应该在项目中用DataTable替换Footable。谢谢你的提醒…谢谢你的帮助，但我不太喜欢嵌套表。阅读DataTables JS给了我一个想法，我已经设法让它工作了-详细信息请参阅我的答案。这仍然适用于footable的版本3！只需使用事件'after.ft.sorting'而不是'footable_sorted'：$（“#client_targets_footable”）.footable（{“on”：{“after.ft.sorting”：函数（e）{[…]}}）；

$('#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));
        });
    }
});