DataTables中提示：DataTables warning: table id=example - Cannot reinitialise DataTable.

场景

在页面中有一个下拉框select，在select的change事件中，每此要根据选择的值的

不同进而在dataTables中显示不一样的值。

错误提示如图：

错误代码如下：

$(document).ready(function() {
    //选择退货方后退货目的地绑定联动
    $("#businessInitiator").bind("change", function () {
        //获取选中的option的value值
        var selected = $("#businessInitiator option:selected").val();
        //获取退货目的地Input对象
        var destination = $("#destination");
        switch (selected){
            case '原料立库':
                destination.val("原料立库退货点")
                break;
            case '清洁车间':
                destination.val("清洁车间退货点")
                break;
            case '正极车间':
                destination.val("正极车间退货点")
                break;
            case '负极车间':
                destination.val("负极车间退货点")
                break;
            default:
                destination.val("其它退货点")
        }
        //退货目的地联动完成
        // DataTable初始化
        var t = $('#example').DataTable({
            "language": {
                "processing": "处理中...",
                "lengthMenu": "显示 _MENU_ 项结果",
                "zeroRecords": "没有匹配结果",
                "info": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
                "infoEmpty": "显示第 0 至 0 项结果，共 0 项",
                "infoFiltered": "(由 _MAX_ 项结果过滤)",
                "infoPostFix": "",
                "search": "搜索:",
                "searchPlaceholder": "搜索...",
                "url": "",
                "emptyTable": "表中数据为空",
                "loadingRecords": "载入中...",
                "infoThousands": ",",
                "paginate": {
                    "first": "首页",
                    "previous": "上页",
                    "next": "下页",
                    "last": "末页"
                },
                "aria": {
                    paginate: {
                        first: '首页',
                        previous: '上页',
                        next: '下页',
                        last: '末页'
                    },
                    "sortAscending": ": 以升序排列此列",
                    "sortDescending": ": 以降序排列此列"
                },
                "decimal": "-",
                "thousands": "."
            },
            "processing": true,
            "searching" : false,
            "pageLength": 100,
            "serverSide": true,
            "columnDefs": [ {
                "searchable": false,
                "orderable": false,
                "targets": "_all",
            }],
            "dom": '<"top">rt<"bottom"flpi><"clear">',

            columns: [
                { data: 'id' ,
                    "orderable" : false},
                { data: 'goodsLocationNumber' },
                { data: 'locationTypeName' ,
                    "orderable" : false},
                { data: 'saveMaterialTypeName' ,
                    "orderable" : false},
                { data: 'materielStatusName',
                    "orderable" : false},
                { data: 'shelveName' ,
                    "orderable" : false},
                { data: 'remark',
                    "orderable" : false }
            ],columnDefs: [{
                //   指定第1列，从0开始，0表示第一列，1表示第二列……
                "targets": 0,
                "bSortable": false,
                "render": function(data, type, row, meta) {
                    if (row.isSelected == 1){
                        return '<input type="checkbox" class="checkchild" onclick="childClick(this)" checked="checked" value="' + row.id + '" />'
                    }
                    return '<input type="checkbox" class="checkchild" onclick="childClick(this)" value="' + row.id + '" />'
                }
            }],
            "ajax": function (data, callback, setting) {
                data.editActionId = $("#refundOrderId").val();
                $.ajax({
                    type: 'POST',
                    url: "/busGoodsLocation/getRejectsLocationsList",
                    cache: false,  //禁用缓存
                    //async: true,
                    data: JSON.stringify(data),  //传入组装的参数
                    contentType: "application/json",
                    dataType: "json",
                    success: function (result) {
                        callback(result);
                    }
                })
            }
        });
    });
});

实现

根据错误提示是不能初始化dataTable，即在同一个页面中不能多次初始化DataTables。

解决，在每此的点击事件中初始化之前先还原初始化。

 $("#example").dataTable().fnDestroy();//还原初始化了datatable

完整示例代码：

$(document).ready(function() {
    //选择退货方后退货目的地绑定联动
    $("#businessInitiator").bind("change", function () {
        //获取选中的option的value值
        var selected = $("#businessInitiator option:selected").val();
        //获取退货目的地Input对象
        var destination = $("#destination");
        switch (selected){
            case '原料立库':
                destination.val("原料立库退货点")
                break;
            case '清洁车间':
                destination.val("清洁车间退货点")
                break;
            case '正极车间':
                destination.val("正极车间退货点")
                break;
            case '负极车间':
                destination.val("负极车间退货点")
                break;
            default:
                destination.val("其它退货点")
        }
        //退货目的地联动完成
 $("#example").dataTable().fnDestroy();//还原初始化了datatable
        // DataTable初始化
        var t = $('#example').DataTable({
            "language": {
                "processing": "处理中...",
                "lengthMenu": "显示 _MENU_ 项结果",
                "zeroRecords": "没有匹配结果",
                "info": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
                "infoEmpty": "显示第 0 至 0 项结果，共 0 项",
                "infoFiltered": "(由 _MAX_ 项结果过滤)",
                "infoPostFix": "",
                "search": "搜索:",
                "searchPlaceholder": "搜索...",
                "url": "",
                "emptyTable": "表中数据为空",
                "loadingRecords": "载入中...",
                "infoThousands": ",",
                "paginate": {
                    "first": "首页",
                    "previous": "上页",
                    "next": "下页",
                    "last": "末页"
                },
                "aria": {
                    paginate: {
                        first: '首页',
                        previous: '上页',
                        next: '下页',
                        last: '末页'
                    },
                    "sortAscending": ": 以升序排列此列",
                    "sortDescending": ": 以降序排列此列"
                },
                "decimal": "-",
                "thousands": "."
            },
            "processing": true,
            "searching" : false,
            "pageLength": 100,
            "serverSide": true,
            "columnDefs": [ {
                "searchable": false,
                "orderable": false,
                "targets": "_all",
            }],
            "dom": '<"top">rt<"bottom"flpi><"clear">',

            columns: [
                { data: 'id' ,
                    "orderable" : false},
                { data: 'goodsLocationNumber' },
                { data: 'locationTypeName' ,
                    "orderable" : false},
                { data: 'saveMaterialTypeName' ,
                    "orderable" : false},
                { data: 'materielStatusName',
                    "orderable" : false},
                { data: 'shelveName' ,
                    "orderable" : false},
                { data: 'remark',
                    "orderable" : false }
            ],columnDefs: [{
                //   指定第1列，从0开始，0表示第一列，1表示第二列……
                "targets": 0,
                "bSortable": false,
                "render": function(data, type, row, meta) {
                    if (row.isSelected == 1){
                        return '<input type="checkbox" class="checkchild" onclick="childClick(this)" checked="checked" value="' + row.id + '" />'
                    }
                    return '<input type="checkbox" class="checkchild" onclick="childClick(this)" value="' + row.id + '" />'
                }
            }],
            "ajax": function (data, callback, setting) {
                data.editActionId = $("#refundOrderId").val();
                $.ajax({
                    type: 'POST',
                    url: "/busGoodsLocation/getRejectsLocationsList",
                    cache: false,  //禁用缓存
                    //async: true,
                    data: JSON.stringify(data),  //传入组装的参数
                    contentType: "application/json",
                    dataType: "json",
                    success: function (result) {
                        callback(result);
                    }
                })
            }
        });
    });
});