filter column based on data - not select list items (button list)

thegamechangerpro

I can't seem to sort this one out.

I am using standard column filtering in my footer.
I have a variety of columns that show data with a dropdown button list. The button list is set dynamically before the table is created.

The problem is i can't filter these columns because the filter finds all the values in the button list (or so it seems).

When I use the following, the column wont filter. It takes me a long time to create a sanitized example but I will do so if the answer isn't obvious

{targets: [1], "className": 'dt-body-right', "render": function (data, type, row) {return data + '<button class="btn btn-default fa-solid fa-caret-down" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button><div class="dropdown-menu" aria-labelledby="dropdownMenu2"><button class="dropdown-item dep"Option1" type="button" id="Option1">Option1</button><button class="dropdown-item dep"Option2" type="button" id="Option2">Option2</button></div>'}},

FILTER FUNCTION

    table.columns().every( function () {
        var that = this;
 
        $( 'input', this.footer() ).on( 'keyup change', function () {
        console.log(that.index(), table.colReorder.transpose( that.index() ))
            table.column( table.colReorder.transpose( that.index() ))
                .search( this.value )
                .draw();
        } );
    } );

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

kthorngren

Are you wanting the filter to find only the data for that column?

Possibly you will want to use Orthogonal data and just return the buttons for the display operation. Here is some pseudo code:

    render: function ( data, type, row ) {
        // If display return the button
        if ( type === 'display'  ) {
            return data + '<button class.....'
        }
 
        // Otherwise return the raw data for sorting, searching and type detection
        return data;
    }

Kevin

thegamechangerpro

Right as usual!!!! That is super helpful!