Using data-search when cells contain buttons, etc.

ps008v009

I'm trying to use the data-search attribute in way similar to the following example:

https://datatables.net/forums/discussion/23899/how-do-i-modify-the-data-search-of-a-dynamically-modified-cell
http://live.datatables.net/dujuyilo/4/edit

The example is very helpful, but it's a little buggy. Search results can include a record that shouldn't have matched.

Specifically, one of the rows in the example has a button. If the search pattern occurs in the button text, that row will be included in the results, whether the data-search value matched or not.

For example, enter "change" in the Search box, and see what happens.

In my case, I have a <select> element rather than a <button>. If the search pattern occurs in the text for any of the <option> elements, that row will appear in the search results.

Is there a workaround for this?

ps008v009

I found a workaround. Don't try to search the column that doesn't play well with the built-in search feature. Instead, make it non-searchable, and add a new column to support searching the relevant data from the non-searchable column.

Something like this:

js "columnDefs": [ ... { "targets": 5, "render": RenderDropdown, "searchable": false }, { "targets": 6, "render": RenderSearchData, "visible": false } ... ]

In this case, the RenderSearchData function retrieves the text for the selected dropdown value in the other column, and returns that text. That meets the need.

What I like so far about DataTables is that workarounds for a slightly funky use case like this can be implemented using built-in features. Very nice.