Datatable首次触发change事件AJAX正常，后续报无法重新初始化错误如何解决？

错误原因 #

报错是因为每次select的change事件触发时，都会重复对同一个#example表格执行DataTable初始化操作，且你错误地将destroy、retrieve、paging、searching这些DataTable的顶级配置参数放在了ajax配置项内部，导致配置不生效，才会触发重复初始化的错误。

解决方案 #

方案1：调整配置参数位置，每次触发时销毁旧实例后重建 #

适合切换下拉框时需要修改表格列定义的场景，只需要将原本放在ajax内部的顶级配置移到外层即可：

$("#formulaId").change(function () {
    var popup, dataTable;
    var entity = 'Quote';
    var apiurl = '/api/' + entity + '/index';
    var formulaId = $('#formulaId').val();

    var table = $('#example').DataTable({
        destroy: true, // 移到顶级配置
        retrieve: true,
        paging: false,
        searching: false,
        "ajax": {
            "url": apiurl + '/' + formulaId,
            "type": 'GET',
            "datatype": 'json'
        },
        // 保留你原有columns配置不变
        columns: [
            { title: "Item Key", data: "itemKey" },
            { title: "Description", data: "description" },
            { title: "Pounds", data: "pound" },
            { title: "Current Cost", data: "cost" },
            {
                title: "New Cost", data: "cost",
                "render": function (data, type, row) {
                    return '<input type="number" class ="price-input"  value="' + data + '" style="background-color:lightgoldenrodyellow;">';
                }
            },
            { title: "Unit", data: "unit" },
            {
                title: "Quantity", data: "quantity"
            },
            {
                title: "Total", data: function (data, type, row) {
                    return '<input type="number" readonly  value="' + data.totalCost + '" style="background-color:lightgoldenrodyellow;">';
                }
            },
            {
                title: "New Total", "data": "totalCost",
                "render": function (data, type, row) {
                    return '<input type="number" readonly class ="price-input"  value="' + data + '" style="background-color:lightgoldenrodyellow;">';
                }
            }
        ]
    });
});

方案2（更推荐）：全局仅初始化一次表格，change事件仅重载数据 #

性能更高，不需要反复销毁重建表格实例，代码调整如下：

// 全局声明表格实例
var table;
// 页面加载完成后先初始化一次Datatable
$(function(){
    var entity = 'Quote';
    var apiurl = '/api/' + entity + '/index';
    table = $('#example').DataTable({
        paging: false,
        searching: false,
        "ajax": {
            // 初始地址可根据你页面默认选中的下拉框值调整
            "url": apiurl + '/',
            "type": 'GET',
            "datatype": 'json'
        },
        // 原有columns配置不变
        columns: [
            { title: "Item Key", data: "itemKey" },
            { title: "Description", data: "description" },
            { title: "Pounds", data: "pound" },
            { title: "Current Cost", data: "cost" },
            {
                title: "New Cost", data: "cost",
                "render": function (data, type, row) {
                    return '<input type="number" class ="price-input"  value="' + data + '" style="background-color:lightgoldenrodyellow;">';
                }
            },
            { title: "Unit", data: "unit" },
            {
                title: "Quantity", data: "quantity"
            },
            {
                title: "Total", data: function (data, type, row) {
                    return '<input type="number" readonly  value="' + data.totalCost + '" style="background-color:lightgoldenrodyellow;">';
                }
            },
            {
                title: "New Total", "data": "totalCost",
                "render": function (data, type, row) {
                    return '<input type="number" readonly class ="price-input"  value="' + data + '" style="background-color:lightgoldenrodyellow;">';
                }
            }
        ]
    });
})

// 下拉框change事件仅更新ajax地址重载数据
$("#formulaId").change(function () {
    var entity = 'Quote';
    var apiurl = '/api/' + entity + '/index';
    var formulaId = $('#formulaId').val();
    // 直接更新url重载数据，不需要重新初始化
    table.ajax.url(apiurl + '/' + formulaId).load();
});

内容的提问来源于stack exchange，提问作者user3471546