ajax响应后如何刷新数据表答案

【问题标题】：how to refresh datatables after ajax responseajax响应后如何刷新数据表
【发布时间】：2020-04-30 18:38:03
【问题描述】：

我有一个问题，这里我在重新加载页面时自动点击按钮并发送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
                }
                ]
            });
            });  
            }
        });
});

重新加载datatables页面时第一次点击的时间出现成功，但是datatables创建后第二次点击的时候报错

【问题讨论】：

您能否将 var VendorClient 的声明移到顶部并代替您的注释代码 // $('#getData').DataTable().clear().destroy();你试试 VendorClient.destroy();
先生，我想我不能移动它，因为在调出数据表之前，有一个从 API 更新数据的过程 {{route ('get-some-data')} }
@dev 如果我向上移动，数据表将在数据更新之前调出数据库中的数据
好吧..也许你是对的，但你试过了吗？因为我只是想让你在顶部 var VendorClient 声明变量；它不会有数据，一旦你的 API 调用成功，那么只有你有数据。
我已经添加了，现在试试 VendorClient.ajax.reload (null, false); ，但它没有工作

标签： javascript datatable datatables datatables-1.10

【解决方案1】：

您为什么不使用内置的 Ajax 函数而不是使用 jQuery Ajax 来填充您的 DataTable？这要简单得多。 Follow this example to define your DataTable，然后当您想在按钮单击处理程序中重新加载时：

VendorClient.ajax.reload();

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

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

如果您有想要与您的 ajax 网址一起发送的选项，您可以define it as an object。

通过这种方式，您不会遇到每次都重新创建 DataTable 的问题。

【讨论】：