Question

http://www.datatables.net/

jQuery datatables是一个添加过滤器，分页和搜索输入的插件。我一直在使用它们和我的Laravel应用程序一起放入数据并且它已经正常工作。

我现在添加了一个与数据表分开的下拉过滤器，我添加了一些看起来像这样的jQuery代码：

$('.dropdownselect').change(function() {
    $('.table').find('tr').remove();

    $.post('/schedules', { value: $(this).val() }, function(result) {
        $.each(result, function(k, v) {
            $('.table-body').append('<tr><td>' + v.name + '</td></tr>');
        });
    });
});

它只是删除更改后的值，并将schedules路由返回的新值附加到表中。实际上还有4个<td>，但出于简化的目的，我只包括一个。

使用上面的代码时，它不维护datatables插件的功能。

这是为什么？有办法解决吗？或者更好的方法呢？

Answer 1

通过AJAX请求向DOM添加新行不会通知DataTables对象容器这些更改。您需要使用Datatable.row.add()插入行，然后重新绘制表以直观地更新表格显示以考虑此新数据。

请尝试以下操作。

$('.dropdownselect').change(function() {
    $('.table').find('tr').remove();
    var t = $('.table').DataTable();

    $.post('/schedules', { value: $(this).val() }, function(result) {
        $.each(result, function(k, v) {
            t.row.add( [v.name, v.otherParam, v.anotherParam] );
        });
        t.draw();
    });
});

通过AJAX将数据附加到jQuery数据表不是使用数据表分页和功能

1 个答案: