Question

我想实现一个无限滚动表，一次加载数据块，我希望能够对它进行排序（整个表，而不仅仅是可见行）以及过滤它。为了做到这一点，我尝试了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.");
        }
    });
}

无限滚动表w /排序和过滤

0 个答案: