javascript - Footables 列排序会重复表中的行，为什么？

Question

我正在将 footables 添加到表格中，但表格的每一行都必须有一个 tbody。这是因为我正在向以这种方式生成 html 的现有系统添加可移动排序和过滤。

每次您尝试按列标题对表格进行排序时，这似乎都会导致重复表格​​行，但我不明白为什么。

表结构有点像这样:

<table data-filter="#filter" class="footable table demo">
<thead>
    <tr>
        <th>Name</th>
        <th>Job Title</th>
        <th>Status</th>
        <th>Description</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>Name1</td>
        <td>Job Title1</td>
        <td>Active</td>
        <td>Description1</td>
    </tr>
</tbody>
<tbody>
    <tr>
        <td>Name2</td>
        <td>Job Title2</td>
        <td>Disabled</td>
        <td>Description2</td>
    </tr>
</tbody>
</table>

JavaScript:

$(function () {
    $("table").footable().bind("footable_filtering", function (e) {
        var selected = $(".filter-status").find(":selected").text();
        if (selected && selected.length > 0) {
            e.filter += (e.filter && e.filter.length > 0) ? " " + selected : selected;
            e.clear = !e.filter;
        }
    });

    $(".clear-filter").click(function (e) {
        e.preventDefault();
        $(".filter-status").val("");
        $("table.demo").trigger("footable_clear_filter");
    });

    $(".filter-status").change(function (e) {
        e.preventDefault();
        $("table.demo").trigger("footable_filter", {
            filter: $("#filter").val()
        });
    });
});

我还设置了一个演示该问题的工作 jsfiddle:https://jsfiddle.net/35ht6kup/9/

有人知道如何解决这个问题吗？

Answer 1

您可以使用 jQuery 重建表格，例如(使用比“table”更好的选择器进行改进):

$(document).ready(function(){
    var thead = $('table thead');
    var tbodyhtml;

    $('table tbody').each(function(){
       tbodyhtml += $(this).html();
    });

    $('table').html(thead);
    $('table').append('<tbody>'+tbodyhtml+'</tbody>');
});