Filtering Two Columns Not Working

Baino

Hello,

Please can you provide advice on the below issue.

I have a datatable and it has been set up to filter on two columns, the filtering works by excluding selected rows by selecting strings from a list. Rows with entries that match the string from the column are filtered out. One of the column works perfectly (the 'Event Type' column), the other fails (the 'Source system' column). I am unsure why. The code is almost identical for the two.

Thanks in advance.

The error message in the browser:

jquery.dataTables.min.js:155 Uncaught TypeError: Cannot read properties of null (reading 'length')
at Ab (jquery.dataTables.min.js:155:235)
at jquery.dataTables.min.js:147:99
at k (jquery.dataTables.min.js:144:335)
at Object.success (jquery.dataTables.min.js:145:258)
at fire (jquery-3.4.1.js:3291:31)
at Object.fireWith [as resolveWith] (jquery-3.4.1.js:3421:7)
at done (jquery-3.4.1.js:9533:14)
at XMLHttpRequest.<anonymous> (jquery-3.4.1.js:9785:9)

Datatable javascript:

table = $('#diary-events').DataTable({
        "deferLoading": true,
        "paging": true,
        "retrieve": true,
        "pageLength": 100,
        "scrollY": "50vh",
        "order": [[2, "asc"]],
        "processing": true, // control the processing indicator.
        "serverSide": true, // recommended to use serverSide when data is more than 10000 rows for performance reasons
        "lengthMenu": [[10, 20, 50, -1], [10, 20, 50, "All"]],
        "scrollCollapse": true,
        "ajax": { "url": #############, type: 'GET' },
        "columns": [
            {
                'className': 'details-control',
                'orderable': false,
                'data': null,
                'defaultContent': ''
            },
            { data: "sequence" },
            {
                data: "timestamp",
                render: function (data, type, row)
                {
                    var d_time = new Date(row.timestamp);
                    var timePart = d_time.toUTCString();
                    var datePart = timePart.substring(0, timePart.length - 4);
                    return datePart;
                }
            },
            { data: "display_type" },
            { data: "text" },
            { data: "source_system" },
            { data: "user_name" }
        ],

        rowCallback: function (row, data, index) {
            console.log('rowCallback');
        },
        "columnDefs": [
            { visible: true, "targets": '_all' },
            { targets: 0, 'checkboxes': { 'selectRow': true }},
            { targets: [0, 2], 'searchable': false },
            { targets: [3, 5], 'className': 'filter'}],
        dom: 'Bfrtip',
        buttons: [
            'colvis'
        ],
        initComplete: function () {
            this.api().columns().every(function () {
                var displayTitle = this.header().innerText;
                var title = this.header();

                if (title.className.includes('filter')) {
                    //replace spaces with dashes
                    title = $(title).html().replace(/[\W]/g, '-');
                    var column = this;
                    var select = $('<select id="' + title + '" class="select2" ></select>')
                        .appendTo($(column.footer()).empty())
                        .on('change', function () {
                            //Get the "text" property from each selected data 
                            //regex escape the value and store in array
                            var data = $.map($(this).select2('data'), function (value, key) {
                                return value.text ? '' + $.fn.dataTable.util.escapeRegex(value.text) + '' : null;
                            });

                            //if no data selected use ""
                            if (data.length === 0) {
                                data = [""];
                            }

                            //join array into string with regex or (|)
                            var val = data.join('|');
                            var val = val ? '^(?!' + val + ').*$' : '';

                            //search for the option(s) selected
                            column
                                .search(val ? val : '', true, false)
                                .draw();

                            table.ajax.reload();
                        });

                    switch (displayTitle) {
                        case 'Event Type':
                            $.each(uniqueEventList.sort(), function (i, v) {
                                select.append('<option value="' + v + '">' + v + '</option>');
                            });
                            break;

                        case 'Source System':
                            $.each(uniqueSourceSystemList.sort(), function (i, v) {
                                select.append('<option value="' + v + '">' + v + '</option>');
                            });
                            break;
                    }

                    //use column title as selector and placeholder
                    $('#' + title).select2({
                        multiple: true,
                        closeOnSelect: false,
                        placeholder: "Hide " + displayTitle
                    });

                    //initially clear select otherwise first option is selected
                    switch (displayTitle) {
                        case 'Event Type':
                            $('#-div-Event-Type--div-.select2').val(['UEL', 'Test Information']);
                            $('#-div-Event-Type--div-.select2').trigger('change.select2');
                            column.search("^(?!Test Information|UEL).*$", true, false).draw();   
                            break;

                        case 'Source System':
                            $('#-div-Source-System--div-.select2').val(null);
                            $('#-div-Source-System--div-.select2').trigger('change.select2');
                            break;
                    }
                 
                }
            });
        }
    });

Edited by Kevin: Syntax highlighting. Details on how to highlight code using markdown can be found in this guide

kthorngren

Uncaught TypeError: Cannot read properties of null (reading 'length')

When do you get this error?

Without seeing an example its very difficult to debug your code. Please post a link to your page or a test case replicating the issues so we can take a look and help debug.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin