Question

I am using this code to initialize datatable and after Delete link is clicked – EVERYTHING works OK, but Iam using refresh page, so I tried to delete row directly with DataTable function, but can’t get it to work at all…. Here is current code (the one that works, but refreshes whole page):

<script type="text/javascript">
$(document).ready(function() {
    $('#publishers').dataTable( {
        "iDisplayLength": 50,
    "sPaginationType": "full_numbers",
     "bStateSave": true
} );
} );

function DeletePublisher(publisherid) {
jConfirm('Are you sure you want to delete this publisher?', 'Delete publisher', function(r) { if (r)
$.ajax({
  type: "GET",
  url: 'includes/publishers/delete-publisher.php?publisherid=' + publisherid,
  data: '',
  success: function(response){
    $.jGrowl('Publisher deleted');
     window.location.reload();
  }
});
});
}
</script>

and in body…

         ...A LOT OF UNINTERESTING COLUMNS, AND THE ONE WITH ACTION:
<td class="action-th">
           <ul class="button-table-head">
                        <li><div class="button-head edit-icon"><a href="#" class="sweet-tooltip" data-text-tooltip="Edit" data-style-tooltip="tooltip-mini-slick"><span>Edit</span></a></div></li>
                        <li><div class="button-head delete-icon"><a href="#" class="sweet-tooltip" data-text-tooltip="Delete" data-style-tooltip="tooltip-mini-slick" onclick="DeletePublisher('<?php echo $publisher_id; ?>')"><span>Delete</span></a></div></li>
                    </ul>
                </td>

I tried using this code, but it didn’t work:

function DeletePublisher(publisherid) {
jConfirm('Are you sure you want to delete this publisher?', 'Delete publisher',function(r) { if (r)
$('#publishers tbody').on( 'click', 'tr', function () {
    var tr = this;
$.ajax({
  type: "POST", //or GET
  url: 'includes/publishers/delete-publisher.php?publisherid=' + publisherid,
  data: '',
  success: function(response){
    t.fnDeleteRow( tr );
    $.jGrowl('Publisher deleted');
}
} );
});
});
}

Any ideas why- I am totaly noob to JS, JQuery….

Answer 1

If you pass a reference to the clicked element you can do this easily:

onclick="DeletePublisher(this,'<?php echo $publisher_id; ?>')"

Then in your function:

function DeletePublisher(element,publisherid) {
...
 success: function(response){
    $(element).parents('tr').remove()
    $.jGrowl('Publisher deleted');

  }
 ...
}

…then don’t call window.location.reload(); at all