2

フッタブルをテーブルに追加していますが、テーブルには各行に 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/

誰でもこれを解決する方法を知っていますか?

4

1 に答える 1

0

たとえば、jQueryを使用してテーブルを再構築できます（「テーブル」よりも優れたセレクターで洗練されます）：

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

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

    $('table').html(thead);
    $('table').append('<tbody>'+tbodyhtml+'</tbody>');
});
于 2015-08-12T13:14:09.397 に答える