javascript - 並べ替えとフィルタリングを備えた無限スクロール テーブル

Question

一度にデータのチャンクをロードする無限スクロール テーブルを実装したいのですが、それを並べ替え (表示されている行だけでなく、テーブル全体)、フィルタリングできるようにしたいと考えています。そうするために Footables プラグインを試しましたが、データを非同期にロードすると、ソートもフィルタリングもされず、本当に欲しいものを達成できません..

どうすればこの実装を達成できますか? それが別のライブラリ、Angular、またはその他のものであるかどうかは気にしません。しかし、私はすでに試したことから新鮮な空気が必要です.

スクロール時にデータを完全にロードするコードを貼り付けますが、ソートはしません (明らかに ajax では機能しません)。

表のマークアップ:

<table data-sorting="true" class="table table-hover footable" data-page-size="30">
    <thead>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Date</th>
            <th>Actions</th>
        </tr>                   
    </thead>
    <tbody>
    </tbody>
</table>

JS

var win = $(window);
win.scroll(function() {
    if(win.scrollTop() + win.height() >= $(document).height()) {
        getData();
    }
});

function getData(){ 
    var container = $('table tbody');
    var displayedElements = container.children('tr').length;
    var ajaxUrl = '/some/api';
    $.ajax({
        type: "GET",
        url: ajaxUrl,
        data: {
            displayedData: displayedElements
        },
        success : function(html) {
            $('table tbody').append(html);
            var page_size = $('table').data('page-size');
            $("table").attr('data-page-size', page_size + 30);
            $('table tbody').trigger('footable_redraw');
        },
        error : function(xhr, statusText, error) { 
            alert("Error! Could not retrieve the data.");
        }
    });
}