如何在 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
                }
                ]
            });
            });  
            }
        });
});

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

Answer 1

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

VendorClient.ajax.reload();

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

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

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

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

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

how to refresh datatables after ajax response

javascript

datatable

datatables

datatables-1.10