dataTables columnDefs在重新加载时发生更改

Question

我在函数中调用dataTables()，因为我将其用于多个事件，并且最初是从$(document).ready()调用的。它在初始呼叫中按预期工作。当一个类别为#jobtype的两个选择框（#jobstatus，.filter）中的任何一个被更改时，都会触发事件监听器。此事件侦听器再次调用loadtable()函数。根据选择框返回正确的数据，但列宽全部关闭。我的整个<script>标签在下面。

第二个调用中的数据也没有问题。

我在哪里想知道为什么更改列宽属性？

<script>

    var table;

    function loadtable() {
        var jobtype = $('#jobtype').val();
        var status = $('#jobstatus').val();

        if (table) {
            table.destroy();
        };

        table = $('#events').DataTable({
            'processing': true,
            'serverSide': true,
            'pageLength': 25,
            'lengthMenu': [[10, 15, 20, 25, 50], [10, 15, 20, 25, 50]],
            'ajax': {
                'url': 'LoadEvents/' + jobtype + '/' + status,
                'type': 'POST',
                'dataType': 'json'
            },
            'columns': [
                { 'data': 'Id', 'name': 'Id' }, // 0
                { 'data': 'JobNumber', 'name': 'JobNumber' }, // 1
                { 'data': 'JobType', 'name': 'JobType' }, // 2
                { 'data': 'Status', 'name': 'Status' }, // 3
                { 'data': 'JobDateTime', 'name': 'JobDateTime' }, // 4
                { 'data': 'LogText', 'name': 'LogText' }, // 5
                { 'data': 'FullLog', 'name': 'FullLog' }, // 6
                { 'data': 'XML', 'name': 'XML' }, // 7
                { 'data': 'FullXML', 'name': 'FullXML' } // 8
            ],
            'columnDefs': [
                { 'visible': false, 'targets': [0, 6, 8] },
                { 'sortable': false, 'targets': [0] },
                { 'width': '25px', 'targets': [1] },
                { 'width': '150px', 'targets': [2] },
                { 'width': '125px', 'targets': [4] },
                { 'width': '50px', 'targets': [3] },
                {
                    'render': function(data, type, row) {
                        return '<span class="expand" data-type="log" id="' + row.Id + '">' + data + '<span style="display: none">' + row.FullLog + '</span></span>';
                    },
                    'targets': 5
                },
                {
                    'render': function(data, type, row) {
                        return '<span class="expand" data-type="xml" id="' + row.Id + '">' + data + '<span style="display: none">' + row.FullXML + '</span></span>';
                    },
                    'targets': 7
                }
            ],
            'order': [
                [4, 'desc']
            ]
        });
    }

    $(document).ready(function () {
        loadtable();
    });

    $(document).on('change',
        '.filter',
        function() {
            loadtable();
        });
</script>