Search with highlighting on single-call DT

sronsiek

I'm setting up a page in an app capable of either downloading or streaming (using JS EventSource) log files to a textarea. This works & I'd like to add a search & highlight option. I've tried several jquery libs that provide this within textareas, but they either do not work or become very inefficient as file size grows (as textareas do not allow embedding anything).

As an alternative, I was considering replacing the textarea with a single cell, scrollable DataTable, and using the built-in search feature. I have seen a third-party highlight option is available.

On the DT side of things, I'd be looking if the following can be achieved:

• disable the default behaviour of hiding rows which do not match the search string. Can this be done via the api?
• the ability to present data in text-file style, eg preserve new-lines (for instance, can I simply use html <pre> within the cell data?)
• the ability to scroll to the first / next / previous search match, within the single cell
• nice-to-have: a simple way of determining 'no search hits'

Since the app is already using DT, I can imagine this could be a neat solution!

allan

Highlighting in a textarea probably isn't the best way, as you've found. If you can do an element for each log entry, that might be the best option. Then you can prepend the new log entries at the top of a container, and then run the highlighter on just the new element(s).

You could do it in DataTables - which if you wanted to split your log message up a bit (e.g. date / time, process, message) might be beneficial.

disable the default behaviour of hiding rows which do not match the search string. Can this be done via the api?

No. Filtering will always remove rows. If you only want highlighting, then disable DataTable's built in search and just run the highlighter from your own input element.

the ability to present data in text-file style, eg preserve new-lines (for instance, can I simply use html <pre> within the cell data?)

Yes.

the ability to scroll to the first / next / previous search match, within the single cell

That's not something DataTables would provide. You could do it using DOM methods though.

nice-to-have: a simple way of determining 'no search hits'

If you aren't using DataTable's filtering, then this would be something you would need to implement in combination with whatever highlighter you use.

Allan