首页 文章

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

提问于
浏览 次
3

我正在使用DataTables jQuery插件来显示HTML表格，我已经制作了 AJAX 行删除功能，在后台发送删除 POST 请求并在 #info div中显示返回的 HTML 消息，并从 DOM 中删除相关的 HTML 行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();         
        }
    );
}

到目前为止一切正常，行被删除并显示返回消息，但是，当我单击 Headers 再次对行进行排序（递增或递减）时，删除的行重新出现（在当前会话中，而不是在页面重新加载之后）和它仍然是可搜索的，我希望解决这个问题 .

从我的某些方面来看，它是从每种类型的 DOM 加载的 . 我已尝试过许多不同的方法来做到这一点，但它不起作用 .

javascript jquery html sorting datatable

2 回答

  • 3

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

    然后我注意到你只是在给定的行上使用jQuery .remove() 删除了行（换句话说，删除了真正公开的DOM行），而this DataTable page表示你应该使用专用的 .row().remove() .

    所以在你的例子中我猜你应该用 yourDataTable.row($('#row' + setID)).remove(); 替换 $('#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() 确保行立即消失 .

    NOTE: (if you're getting .row is not a function or $datatable is not defined) You must reintialize your datatable before removing the row as

    var $datatable = $('#datatable-selector').DataTable();
$datatable.row($deletingRowSelector).remove().draw();
    回复于
  • 7

    你需要从它自己的APi中删除它当这个'table'被调用时：

    var table = $('#yourDatatableId').DataTable();

    然后：

    ...done
    (
        function(data)
        {
            //No need for these:
            //$('#info').html(data);    
            //var setID = id;

            table.row( $(this).parents('tr') ).remove().draw();    
        }
    );
    回复于

相关问题