Jquery - data tables - exclude columns from drop down filter using indexof stops working at first hit

Question

im trying to exclude some columns from having a drop down filter added to them. Ive used IndexOf to try and complete this, however instead of excluded columns 5 and 7, it excludes all columns from 5 so my table for example exlcludes 5,6,7,8 it should only exclude 5 and 7.

here is the code, does anyone know whats wrong?

Thanks

$(document).ready(function() {
    $('#cve_list').DataTable( {
        "pageLength": 18,
        "order": [[ 3, "desc" ]],
        responsive: false,
        "dom": "<'row'<'col-md-6'l><'col-md-6'Bf>>" +
               "<'row'<'col-sm-12'tr>>" +
               "<'row'<'col-sm-5'i><'col-sm-7'p>>",
        buttons: [
            'copyHtml5',
            'excelHtml5',
        ],
        columnDefs: [
           {
              targets: 6,
              type: 'html'
           },
           {
              targets: 7,
              type: 'html'
           }
        ],
        initComplete: function () {
            var excluded_columns = [5,7];
            this.api().columns().every( function () {
                var column = this;
                alert(column.index())
                if(excluded_columns.indexOf(column.index()) == -1) {
                    alert('adding column ' + column.index())
                    var select = $('<br /><select class="dt-select" ><option value=""></option></select>')
                        .appendTo( $(column.header()) )
                        .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(column.index() == 6){ d = $(d).text(); }
                    if(column.index() == 7){ d = $(d).text(); }
                    select.append( '<option value="'+d+'">'+d+'</option>' )
                });
            });
        },
    });
});

score 4 · Accepted Answer · answered Aug 08 '18 at 10:59

When you're debugging Javascript problems don't forget to start with the basics. Check your console for errors. The main issue in your code is with the line:

select.append( '<option value="'+d+'">'+d+'</option>' )

select is defined inside your if(excluded_columns…) block. But the subsequent append is run outside of the block. Meaning when you have an excluded column it's not set and so you get a javascript error.

Uncaught TypeError: Cannot read property 'append' of undefined

Execution then stops so that is why it appears that all of the rest of the columns are "excluded".

There's a couple of ways to fix this, the simplest being to check if select is defined. Eg:

if(select !== undefined) { select.append( '<option value="'+d+'">'+d+'</option>' ) }

But I wonder if that whole column data block actually belongs within the previous if block. So it could be written:

    initComplete: function () {
        var excluded_columns = [5,7];
        this.api().columns().every( function () {
            var column = this;
            alert(column.index())
            if(excluded_columns.indexOf(column.index()) == -1) {
                alert('adding column ' + column.index())
                var select = $('<br /><select class="dt-select" ><option value=""></option></select>')
                    .appendTo( $(column.header()) )
                    .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(column.index() == 6){ d = $(d).text(); }
                    if(column.index() == 7){ d = $(d).text(); }
                    select.append( '<option value="'+d+'">'+d+'</option>' )
                });
            }
        });
    },

Also, just a heads up that you have a special case for the column index 7 which would never actually run as that is one of the columns you are excluding.

And perhaps look here for some hints on javascript debugging: How can I debug my JavaScript code?

Jquery - data tables - exclude columns from drop down filter using indexof stops working at first hit

1 Answers1