Question

我正在向表中添加footables，但是每行必须有一个tbody。这是因为我正在为现有系统添加footable排序和过滤，以这种方式生成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重建表格，例如（使用比＃39; table＆＃39;更好的选择器进行优化）：

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

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

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

Footables列排序是复制表中的行，为什么？

1 个答案: