dataTable 中删除操作的动画效果如何？

Question

我有一段代码可以删除一条记录并重新加载数据表。我想为此动作设置动画，以便在单击按钮时 dataTable 的记录淡出然后从数据库中删除。 这是我的代码：

 $(document).on('click', '.delete', function() {
        var _id = $(this).attr("id");
        data._id = $(this).attr("id");
        data.operation = "deleteorderdetail";
        // alert(data.operation);
        if (confirm("Are you sure?")) {
            $.ajax({
                url: 'delete.php',
                method: 'POST',
                data,
                success: function(data) {
                    $(this).parentsUntil("tr").hide(1000); -----> not work !                        
                    dataTable.ajax.reload();
                }
            });
        } else {
            return false;
        }

最好的问候....

Answer 1

对于 Datatable 试试这个可能对你有帮助 试试这样

   var row = $(this).closest('tr');
                        row.fadeOut(400, function () {
                            dataTable.row(row).remove().draw(false);
                        });

 $(document).on('click', '.delete', function() {
        var _id = $(this).attr("id");
        data._id = $(this).attr("id");
        data.operation = "deleteorderdetail";
        // alert(data.operation);
        if (confirm("Are you sure?")) {
            $.ajax({
                url: 'delete.php',
                method: 'POST',
                data,
                success: function(data) {
                  var row = $(this).closest('tr');
                    row.fadeOut(400, function () {
                        dataTable.row(row).remove().draw(false);
                    });
                }
            });
        } else {
            return false;
        }

Answer 2

您可以对您的方法进行以下更改：

1. 将点击的项目捕获到自己的变量中：

var clickedItem = $(this);

1. 当您选择要隐藏的行时使用此单击项。

2. 不要使用parentsUntil，而是使用closest。使用parentsUntil 将选择您单击的对象中的每个祖先，直到但不包括所选元素（在您的情况下为<tr>）。我假设您想要隐藏整行。

执行第1步的原因：如果你尝试使用$(this).closest("tr").hide(1000);，那么$(this)将引用$(this)所在的jQuery Ajax对象。

最终结果：

$(document).on('click', '.delete', function() {
  var clickedItem = $(this); // capture clicked item
  var _id = $(this).attr("id");
  data._id = $(this).attr("id");
  data.operation = "deleteorderdetail";
  if (confirm("Are you sure?")) {
    $.ajax({
      url: 'delete.php',
      method: 'POST',
      data,
      success: function(data) {
        clickedItem.closest("tr").hide(1000); // use clicked item                 
        dataTable.ajax.reload();
      }
    });
  } else {
    return false;
  }
});