Individual column filtering on hidden column

Miko12359

Hello, is there any way to have a select column filter that works on a hidden column?
I want to be able to filter a column which is also a row group while keeping the column hidden, not the row group.
any help would be appreciated, i am not very experienced with this.
Thanks

$(document).ready( function () {
    $('#example').DataTable(
    {
        
        responsive: true,
        scrollY:'40vh',
        scrollCollapse: true,
        columnDefs: [
        { targets: [0, 3, 4, 5, 7, 8, 9, 11, 12], visible: true},
        { targets: '_all', visible: false },
        
        { width: "40%", targets: [5] }
    ],
        
        
        "order": [[ 0, "asc" ]],
        rowGroup: {
            
            enable: true,
            dataSrc: 1,
        },
         initComplete: function () {
            this.api().columns([1]).every(function () {
                var column = this;
                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 ) {
                    select.append( '<option value="'+d+'">'+d+'</option>' )
                } );
            } );
        }
}
    
    );
    
} );

colin

Hi @Miko12359 ,

Yep, you can filter (and order) by hidden columns. The only problem with your code is that you're attaching the dropdown to the hidden column, so it wouldn't be displayed - it'll have to be attached to something visible.

Cheers,

Colin

Miko12359

Hi @Colin,
could you show me how i would do that since i know its attached to column '1' right now and that column is hidden, but im not sure how i would detach it
Thanks

colin

Line 26 is where it's attached. That could be done to another column, or any other element in the DOM.