vendredi 17 juin 2016

jQuery DataTables: multi filter select Cannot set property 'nTf' of undefined

I am trying to implement the following: 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>')
                            }
                        });

                    }

                } );
            } 
    });
}

I am receiving the following error jquery.dataTables.min.js:27:

Uncaught TypeError: Cannot set property 'nTf' of undefined

I am not sure what the source of the problem is here. Is it perhaps because some of the columns are not visible? Is it maybe because some rows have "null" as their value?

Has anyone else ran into this issue and know how to resolve it?

Aucun commentaire:

Enregistrer un commentaire