排序后再次添加已删除的DataTable行

Question

我使用的数据表 jQuery插件来显示一个HTML表,我已作出AJAX发送所述删除行删除功能POST在后台请求并显示返回的HTML在消息#info的div和删除相关的HTML从行DOM使用jQuery remove()功能.

这是deleteData($id)从行的删除按钮调用的函数:

function deleteData(id)
{
    var data = "id="+id;

    $.ajax(
        {
            type: "POST",
            url: "delete.php",
            data: data
        }
    ).done
    (
        function(data)
        {
            $('#info').html(data);

            var setID = id;

            $('#row' + setID).remove();         
        }
    );
}

一切工作很好,到目前为止,该行被删除,显示返回消息,然而,当我点击标题行再次(递增或递减),删除的行再次出现(在当前会话中,而不是之后重新加载页面)进行排序,并它仍然是可搜索的,我希望解决这个问题.

从我读过的,问题是DataTables只加载一次表,但是有一些方法可以从DOM每种类型加载它.我已尝试过许多不同的方法来做到这一点,但它不起作用.

Answer 1

我以前从未使用过DataTable,但是读了你的问题我很想学习一点.

然后我注意到你只是.remove()在给定的行上使用jQuery删除行(换句话说,删除真正公开的DOM行),而这个DataTable页面声明你应该使用专用.row().remove().

所以在你的例子中我猜你应该替换$('#row' + setID).remove();为yourDataTable.row($('#row' + setID)).remove();.

编辑.
感谢@Bryan Ramsey的评论,我刚刚意识到我的建议解决方案不完整:

• OP使用的语句$('#row' + setID).remove(); 仅从DOM中删除行,但将其保留在DataTable对象中,以便再次显示
• 然后我建议使用yourDataTable.row($('#row' + setID)).remove();,它确实从DataTable对象中删除了行,但现在将它保存在DOM中,以便在下一次更改发生之前它不会在视觉上消失!
• 所以真正完整的解决方案是yourDataTable.row($('#row' + setID)).remove().draw();,draw()确保行立即消失.

注意:(如果您正在获取.row不是函数或$ datatable未定义)您必须重新初始化数据表,然后才能删除行

var $datatable = $('#datatable-selector').DataTable();
$datatable.row($deletingRowSelector).remove().draw();