CODEWITHSUNDEEP
jqueryajaxdatatable
wewe
wewe

Reputation: 193

datatable pagination Delete row using Ajax

I have some issue about the data table pagination. The First Page ajax working but when the second page the ajax is not working :( This is my sample Code

This is my data table script

    $(document).ready(function () {
    $('#my-table2').dataTable({
    "sPaginationType": "full_numbers",
    "aaSorting": [[ 0, "asc" ]],
         bSort: false,
     }); 
   });

Then the AJAX CODE

      $(document).ready(function() {  

 $(".remove_edot").click(function(){         
     e.preventDefault(); 

     var href = $(this).attr("href");
     var btn = this;     

    if (confirm('Are you sure you want to delete this?')) {
        $.ajax({
          type: "GET",
          url: href,
          dataType: 'json',          
          success: function(response) {
          if (response.status === "success"){           
             $(btn).closest('tr').fadeOut("slow");                           
          }
          else{
            alert("Error");
          }
       }
    });   
    return false;
        }
 });

});

please help

Upvotes: 0

Views: 1187

Answers (1)

ahren
ahren

Reputation: 16961

You need to delegate the event handling to the parent.

$('#my-table2').on('click', '.remove_edot', function(e){
  // Your code here
});

That's because when datatables creates the second (and subsequent) pages, it removes the table rows from the DOM and adds new ones. Your original code only bound event listeners on any .remove_edot elements that were in the DOM when it ran.

.on() is only available in jQuery 1.7+, so if you're using a lower version use .delegate() - it has the same arguments.

Upvotes: 2

Related Questions