javascript - 如何在ajax响应后刷新数据表

Question

我有一个问题，这里我在重新加载页面时自动单击按钮并发送ajax，在能够响应后它将创建数据表。问题是当用户再次单击获取数据按钮时，出现错误DataTables warning: table id = tAccount - Cannot reinitialise DataTable.这是我的脚本

 setTimeout(function() {
        $("#get_data").trigger('click');
    },10);

$("#get_data").click(function(){
    var url = "{{route('get-some-data')}}"
    // $('#getData').DataTable().clear().destroy();
        $.ajax({
            type: "get",
            url: url, 
            dataType: "json",
            success:function(data){
            Swal.fire({
                type: 'success',
                title: 'Has been Updated',
                text: data.message.id,
            }).then(function() {
                var VendorClient = $("#tAccount").DataTable({
                lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
                processing: true,
                serverSide: false,
                ajax: "{{route('some-url-response')}}",
                columns: [
                {
                    data: "fullname",
                    name: "fullname",
                    orderable:false
                },
                {
                    data: "name",
                    name: "name",
                    orderable:false
                },
                {
                    data: "month",
                    name: "month",
                    orderable:false
                }
                ]
            });
            });  
            }
        });
});

重新加载数据表页面时第一次点击显示成功，但创建数据表后第二次点击时出现错误

Answer 1

为什么不使用内置的 Ajax 函数，而不是使用 jQuery Ajax 来填充 DataTable？简单多了。 Follow this example to define your DataTable ，然后当您想在按钮单击处理程序中重新加载时，请执行以下操作:

VendorClient.ajax.reload();

或者，如果您想更改网址或搜索参数，请执行以下操作:

VendorClient.ajax.url('new-url-here').load();

如果您想通过 ajax url 发送选项，您可以 define it as an object .

通过这种方式，您就不会遇到每次重新创建数据表的问题。