JQuery DataTable排序与Ajax冲突

Question

所以它来了： 我使用dataTable插件来显示我的html表。当我单击列的标题时，该列已排序。它运作良好。但是当我尝试实现Ajax时，它开始有了时髦的行为。我可以通过Ajax删除DOM文档，该行从表中消失。但在那之后，如果我点击表格的标题，突然，该行返回并显示，即使它已经在数据库中删除了！ dataTable在这里发生了什么？我怀疑jQuery remove（）不会从页面的DOM中删除实际的元素，不知何故它仍然存在但没有显示。所以当我点击标题时，数据表认为该行仍然存在。我被困。谁能帮我这个？非常感谢您的帮助。感谢

Answer 1

这里可能会发生很多事情之一。

• 您是否正在使用带有“fnServerData”的缓存管道？

• 我猜你从数据表中删除行时，你也在调用ajax从数据库中删除它。在尝试再次排序之前，您是否确定操作已完成？

• 您可以在删除回调的成功回调中执行$（“＃tableID”）。fnDraw（），而不是执行.remove（）。这将导致数据表从数据库中获取新数据并为您呈现表。

当你使用“bServerSide”时：true作为数据表的一个选项，最好不要通过jquery.remove（）或其他dom操作方法删除dom元素，而是让datatable.fnDraw（）处理添加和根据从数据库中获取的数据为您删除列。

Answer 2

这是一个老问题，所以我不确定api当时是否可用。这个问题与this SO question类似，但如果没有详细信息就很难说清楚。

您的问题可能是从DOM中删除数据而不将其从DataTable中删除。他们的documentation说要以这种方式删除数据：

var table = $('#example').DataTable();
 
$('#example tbody').on( 'click', 'img.icon-delete', function () {
    table
        .row( $(this).parents('tr') )
        .remove()
        .draw();
} );

DOM使用.draw()命令反映更改，并删除带有.row().remove() api调用的数据表的行。