Filtering Columns that include select input/buttons

thegamechangerpro

Hi there,
I've been looking but can't seem to find a way to make the buttons in my columns not searchable. For example,
This dropdown button is in a column with an actual field. The choice made from the dropdown button sets the field. (My version of a select input - using this method for a variety of reasons I won't bore you with). When I try to filter the table using this column all rows are returned but it finds the search value in every row. ie. if I search Jacobson all rows are returned because Jacobson is an option item.

How do I avoid this?

{targets: [21], "className": 'dt-body-right', "render": function (data, type, row) {return data + <button type="dropdown" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"</button> <div class="dropdown-menu" id="listdrop"> <a class="dropdown-item" href="#">Jacobson</a> <a class="dropdown-item" href="#">Quantum</a> <a class="dropdown-item" href="#">Backstage</a> </div>}},

rf1234

I would make the column not searchable and add another, invisible column which contains the "data" from column 21 (without the button) which is searchable. Let it be column 22.

columnDefs: [
    { targets: 21, searchable: false },
    { targets: 22, visible: false }
],

Alternatively - and probably better - change your renderer:

render: function(data, type, row) {
    if ( type === "filter" ) {
        return data;
    }
    return data + the button;
     ....

or

render: function(data, type, row) {
    if ( type === "display" ) {
        return data + the button;
    }
    return data;
    ....

https://datatables.net/reference/option/columns.render

thegamechangerpro

I like that idea for the search bar, but column filtering would still be an issue, no?

kthorngren

Removing the incorrect answer

Kevin

thegamechangerpro

I completely misread the previous post.

This was EXACTLY what I needed.

render: function(data, type, row) {
if ( type === "filter" ) {
return data;
}
return data + the button;
....