Ajax 请求不适用于数据表分页

Posted 2023-03-14

【中文标题】Ajax 请求不适用于数据表分页

【英文标题】：Ajax request not working on datatable pagination

【发布时间】：2019-02-17 02:15:39

【问题描述】：

在我的Laravel Web 应用程序中，我使用datatable 来显示数据。我的表对view、edit 和delete 有3 个操作。 对于编辑和查看，我使用Bootstrap 4 modal。

这是数据表的视图..

这是我在模态上编辑的 ajax 请求代码：

$.ajax(
      type:'GET',
      url:"route('user.edit')",
      data:'id':user_id,
      success:function(data)
        var role;
        if(data.role_id == 1)
            role = 'Admin';
        else if(data.role_id == 2)
            role = 'Seller';
        else
            role = 'Publisher';
        
        $(header).empty();
        $(header).append('<h3>'+data.details.name+'\'s details</h3>');
        $('#name').empty();
        $('#name').val(data.details.name);
        $('#email').empty();
        $('#email').val(data.details.email);
        $('#contact').empty();
        $('#contact').val(data.details.contact);
        $('#address').empty();
        $('#address').val(data.details.address);
        $('#user_id').empty();
        $('#user_id').val(data.details.id);
        $.each(data.roles, function(index,val)
            if(data.details.role_id == val.id)
                var selected = 'selected';
            $('#role').append('<option '+selected+' value="'+val.id+'">'+val.role_name+'</option>');

        );
    
);

现在第一页一切正常。但是当我在datatable 中搜索某些内容或通过分页转到另一个页面时，我的ajax 请求不起作用。我正在使用类来调用 ajax 请求。当我转到另一个页面或搜索数据并单击编辑时，只有模式打开 ajax 请求不会启动，它显示空模式。 我该如何解决这个问题？

【问题讨论】：

控制台有什么提示吗？此外，删除 empty() 调用。它们是多余的。

您是在刀片中执行此操作吗？ Vue 前端？ Laravel 实际上有一个超级简单/容易的数据表包。 yajrabox.com/docs/laravel-datatables/master/installation 。如果您在刀片中，只需将所有数据从连接到刀片的控制器发送回，循环通过它构建一个在其上调用 jQuery 的表。

@Mark Walet 控制台很干净。当我转到其他页面时，ajax 只是没有激活....

@Brad 我正在使用 Blade。非常感谢您的建议。但是有什么办法可以解决我的问题吗？

【参考方案1】：

$(document).on('click', '.your_button', function()
   //code for action
);

事件处理程序仅处理代码执行时存在于 dom 中的那些元素，因此需要使用基于委托的事件处理程序。试试这个

【讨论】：

非常感谢您的解决方案！它工作得很好。你能解释情况真是太好了。完美的答案。