如何在 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

与其使用 jQuery Ajax 来填充你的 DataTable，为什么不使用内置的 Ajax 函数呢？这要简单得多。按照此示例定义数据表，然后当您想在按钮单击处理程序中重新加载时，请执行以下操作：

VendorClient.ajax.reload();

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

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

如果您有要与 ajax url 一起发送的选项，则可以将其定义为对象。

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