How to implement filtering on column without bypassing the table search

trechubet

Versions

DataTables.net: v1.10.24

Goal

I'm looking to use the DataTable's built-in searching algorithm to filter a set of data by a search criteria, and on a specific case of "tag:": I want to trigger a search into the "tags" column, but this must be done in the same search bar as the table and it must persist all existing stateSave and smartSearch functionality.

Solutions

1. Pushing a search into $.fn.dataTable.ext.search.

I got this to filter the tags as desired, but this overrides the default behaviour of DataTables. I don't want to redefine the search API.

1. Filtering on columns with table.column(index).search.

I got this to filter the tags as desired, but this seems to require a different input than the table search, and upon the filter criteria of "tag:hello", only the filter that went through the table ("tag") is persisted to the table search, yet the filter is still applied. It really seems like the `table.column(11).search) was coupled to it's own search bar, and is incompatible with the main search bar

Conclusion

Is there a way to do this while using the main search bar without removing the main search bars functionality, or am I forced into using some other input like a footer input of which this example displays?

trechubet

I think this is still a good question, because not everyone will want to have n search bars for their columns and instead may want to expand existing search bar capabilities, but I have since come up with a workaround for my specific use-case, so I won't be paying much attention to this.

I've decided to alter the data that ends up on the client-side (while still maintaining integrity on the server-side) to include the prefix of "tag:". This gives me the exact match for a "tag:xyz" search without having to fiddle around with the internals of DataTables.

It looks like this:

1. Load in with data
2. Process data into rows
   a. Add "tag:" prefix to select data in select row
3. Send rows to client site
4. Build table with rows

And voila, when searching for "tag:xyz", I get my rows filtered without the loss of any DT functionality.

This may be a bit dangerous, as if another column wants to use "tag:" as the prefix, then the searching will be wrong, but it's the least invasive strategy so far.

kthorngren

a. Add "tag:" prefix to select data in select row

You could also do this using [orthogonal data]https://datatables.net/manual/data/orthogonal-data() by prefixing tag: to the data in the tags column for the filter operation in columns.render.

Another option is to create you own search input. Remove the default search input using the dom option and add your own using the technique shown here. You can get the input value and remove tag: from the value and use that as the search term using search().

Kevin