jQuery DataTables：多重过滤器选择无法设置未定义的属性'nTf'

Question

我正在尝试实施以下内容： https://datatables.net/examples/api/multi_filter_select.html

HTML：

<div id="viewDataTableParentDiv">
    <button class="btn btn-lg btn-warning loading-button"><span class="glyphicon glyphicon-refresh glyphicon-refresh-animate"></span> Loading...</button>
    <table class="table table-striped table-bordered table-hover" id="viewDataTable" hidden data-parentId="viewDataTableParentDiv">
        <thead class="table-header">
            <tr>
                <th>Query Time</th>
                <th>Node RetrievalId</th>
                <th>Node Name</th>
                <th>Attribute RetrievalId</th>
                <th>Attribute Name</th>
                <th>Ordinal ID</th>
                <th>Raw Value</th>
                <th>Adjusted Value</th>
                <th>Type of Change</th>
                <th>Delta Change (last)</th>
                <th>Delta Change (first)</th>
                <th></th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th>Query Time</th>
                <th>Node RetrievalId</th>
                <th>Node Name</th>
                <th>Attribute RetrievalId</th>
                <th>Attribute Name</th>
                <th>Ordinal ID</th>
                <th>Raw Value</th>
                <th>Adjusted Value</th>
                <th>Type of Change</th>
                <th>Delta Change (last)</th>
                <th>Delta Change (first)</th>
                <th></th>
            </tr>
        </tfoot>
    </table>
</div>

JavaScript的：

function initDataTable(tableId, ajaxData) {

    var greenUpArrow = '<span class="glyphicon glyphicon-arrow-up text-success"></i>';
    var redUpArrow = '<span class="glyphicon glyphicon-arrow-up" style="color: red"></i>';
    var greenDownArrow = '<span class="glyphicon glyphicon-arrow-down text-success"></i>';
    var redDownArrow = '<span class="glyphicon glyphicon-arrow-down" style="color: red"></i>';

    return $(tableId)
        .on('preInit.dt', function() {
            $('#pleaseWaitDialog').modal();
        })
        .DataTable({
            data: ajaxData,
            bAutoWidth: false,
            processing: true,
            dom: 'Bfrtip',
            processing: true,
            buttons: [
                {
                    extend: 'excel',
                    text: 'Export (Excel)'
                },

                {
                    extend: 'csv',
                    text: 'Export (CSV)'
                },

                {
                    extend: 'pdf',
                    text: 'Export (PDF)'
                }
            ],
            'columns': [
                { 'type': 'date', mData: 'QueryTime' },
                { 'type': 'num', mData: 'NodeRetrievalId' },
                { 'type': 'string', mData: 'NodeName' },
                { 'type': 'num', mData: 'AttributeRetrievalId' },
                { 'type': 'string', mData: 'AttributeName' },
                { 'type': 'string', mData: 'OrdinalIdString' },
                { 'type': 'string', mData: 'AttributeRawValue' },
                { 'type': 'string', mData: 'AttributeAdjustedValue' },
                { 'type': 'string', mData: 'TypeOfChangeString' },
                { 'type': 'string', mData: 'DeltaChangeSinceLastResult' },
                { 'type': 'string', mData: 'DeltaChangeSinceFirstResult' }
            ],
            "columnDefs": [
                {
                    "render": function (data, type, row) {
                        var mDate = moment.utc(data);
                        return mDate.tz(jstz.determine().name()).format('M/D/YYYY HH:mm:ss z');
                    },
                    'targets': 0
                },
                {
                    'targets': 1,
                    visible: false
                },
                {
                    'targets': 3,
                    visible: false
                },
                {
                    'targets': 8,
                    visible: false
                },
                {
                    "render": function (data, type, row) {
                        if (data == null) {
                            return "";
                        }

                        if (row["TypeOfStatusChangeString"] == "Good" && row["TypeOfChangeString"] == "Increase") {
                            return data + ' ' + greenUpArrow;
                        } else if (row["TypeOfStatusChangeString"] == "Bad" && row["TypeOfChangeString"] == "Increase") {
                            return data + ' ' + redUpArrow;
                        } else if (row["TypeOfStatusChangeString"] == "Good" && row["TypeOfChangeString"] == "Decrease") {
                            return data + ' ' + greenDownArrow;
                        } else if (row["TypeOfStatusChangeString"] == "Bad" && row["TypeOfChangeString"] == "Decrease") {
                            return data + ' ' + redDownArrow;
                        } else {
                            return data;
                        }

                    },
                    "targets": 9
                }
            ],
            'order': [[0, 'desc']],
            initComplete: function () {
                var parentDiv = $(tableId).attr('data-parentId');
                var loadingButton = $('#' + parentDiv).find('.loading-button');
                loadingButton.hide();
                $(tableId).show();

                this.api().columns().every(function () {
                    var column = this;
                    if (column.visible()) {

                        var select = $('<select><option value=""></option></select>')
                        .appendTo($(column.footer()).empty())
                        .on('change', function () {
                            var val = $.fn.dataTable.util.escapeRegex(
                                $(this).val()
                            );

                            column
                                .search(val ? '^' + val + '$' : '', true, false)
                                .draw();
                        });

                        column.data().unique().sort().each(function (d, j) {
                            if (d == null && d === "") {
                                select.append('<option value="' + d + '">' + d + '</option>')
                            }
                        });

                    }

                } );
            } 
    });
}

我收到以下错误jquery.dataTables.min.js：27：

  

未捕获的TypeError：无法设置未定义的属性'nTf'

我不确定问题的根源在这里。是因为某些列不可见？可能是因为某些行的值为“null”吗？

是否有其他人遇到此问题并知道如何解决？