Question

我对数据表分页有一些问题。第一页ajax工作，但当第二页ajax不工作时:( 这是我的示例代码

这是我的数据表脚本

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

然后是AJAX代码

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

}）;

请帮助

Answer 1

您需要将事件处理委派给父级。

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

那是因为当数据表创建第二个（和后续）页面时，它会从DOM中删除表行并添加新行。您的原始代码仅在运行时在DOM中的任何.remove_edot元素上绑定事件侦听器。

.on()仅适用于jQuery 1.7+，因此，如果您使用较低版本，请使用.delegate() - 它具有相同的参数。

datatable分页使用Ajax删除行

1 个答案: