0

我想实现一个无限滚动表，一次加载大量数据，我希望能够对其进行排序（整个表，而不仅仅是可见行）以及过滤它。为此，我尝试了Footables插件，但我无法真正实现我想要的，当它异步加载数据时，它既不排序也不过滤..

我怎样才能实现这个实现？我不介意它是否是另一个库，角度或其他。但我需要一些我已经尝试过的新鲜空气。

我将粘贴我拥有的代码，该代码在滚动时完美加载数据，但没有排序（它显然不适用于 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.");
        }
    });
}
4

0 回答 0