Question 69982 in Ajax Question posted in
You can find the official documentation here.

How animate for delete action in dataTable? – Jquery ajax

I have a piece of code that delete a record and reload dataTable. I want to animate this action as such that on click the button the record of dataTable fade out and then delete from Data Base.
this is my code:

 $(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;
        }

Best regards….

Tags:

2

Answers


  1. 0

    for Datatable try this may help you
    try like this

       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;
        }
    Login or Signup to reply.
  2. 0

    You can make the following changes to your approach:

    1. Capture the clicked item into its own variable:
    var clickedItem = $(this);

    1. Use this clicked item when you select the row to be hidden.

    2. Instead of using parentsUntil, use closest. Using parentsUntil will select every ancestor from your clicked object up to but not including the selected element (the <tr> in your case). I assume that what you want is to hide the entire row.

    The reason for performing step 1: If you try to use $(this).closest("tr").hide(1000);, then $(this) will refer to the jQuery Ajax object in which $(this) is located.

    The end result:

    $(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;
  }
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search