未定义的错误数据表jQuery

Question

我正在使用数据表以及 Button、FixedColumns 等扩展。我的脚本代码是：

jQuery：

function getData(id)
    {
        if($.fn.DataTable.isDataTable("#tableid"))
        {
            $("#tableid").DataTable().clear().destroy(false);
        }
        $.ajax({
            type: 'POST',
            url: "<?= base_url(); ?>data/view/"+id,
            success: function (data, textStatus, jqXHR) {
                console.log(data);
                if(data.length==0)
                {
                    $("#overlay").fadeIn(500, function () {
                        $("#tableid_cont").css('visibility', "hidden");
                    });
                    //alert("No data in DB!");
                }
                else
                {
                    $("#tableid").html(data);
                    initTable();
                }
            }
        });
    }
    function initTable()
    {
        var table = $("#tableid").DataTable({
            scrollY: "100%",
            scrollX: true,
            scrollCollapse: true,
            paging: false,
            fixedColumns: true,
            ordering: false,
            lengthChange: false,
            "bInfo": false,
            buttons: ['excel'],
            "drawCallback": function (settings) {
                $("#overlay").fadeOut(500, function () {
                    $("#tableid_cont").css('visibility', "visible");
                });
            }
        });
        table.buttons().container().appendTo('#action-buttons');
    }

getData() 由 select HTML 元素中的事件onchange 操作，参数id 获取一些整数值。 ajax 的返回将是一个包含 ID 为 tableid 的 HTML 表的字符串。

让我的选择值为1,2,3

我开始调用getData(1)，这个加载和初始化数据表没有问题。如果值更改为2 或3，我得到的错误是Cannot read property 'dt' of undefined，这发生在$("#tableid").DataTable().clear().destroy(false); 行。

然后再次更改值，表格工作正常，绝对没有错误。

我得出的结论是：初始化数据表后，destroy() 被调用并发生错误。但实际上是被破坏了。可以再次初始化，下次不会出错。

我做错了吗？我很努力，但无法克服这个错误。

Answer 1

不要破坏数据表，而是尝试通过 ajax 重新加载它：

$('#tableid').DataTable().ajax.reload();