Mark.js highlighting in child rows

OJ

hi Allan -

I am trying to use mark.js to highlight terms in child rows - at the moment, this doesnt work due to the sequence the child rows are drawn vs. the rest of the table.

This question has already been answered here -
https://datatables.net/forums/discussion/38113/search-result-highlighting-in-child-rows

but the answer is unclear. Allan suggested to use "setTimeout( ..., 0 ); in the event handler" but i do not understand if this is the draw event handler of the table, or the event handler of the child rows and i do not know how to get access to either event handlers.

thanks
OJ

colin

Hi @OJ,

It's the draw event for the child rows - if you look at the fiddle on that thread you posted, it's the event handler there.

Cheers,

Colin

OJ

hi Colin,

Thank you for your response - but that doesnt seem to work:

I assume you are referring to this event handler in the fiddle:
$('.datatables-table').on('click', 'td.details-control', function () {}

This does not seem to be a "draw event" but a click event. It only fires when the child row is clicked on. I am trying to highlight the terms in the child row as they are being searched - you will notice that the jfiddle you are pointing too will only highlight terms in the child rows upon a click event. For the parent rows - this is not an issue, because the highlight seems to take place after the parent rows are drawn by the search. However the child rows are not being redrawn on a search - so no draw event seem to be firing for child rows.

I would really like to figure out a solution as i have child rows which contain large amounts of text data which id like to implement a search on.

thanks,
OJ

bigern70

Can there be an example of how the setTimeout( ..., 0 ); in the event handler would be done?

kthorngren

@bigern70 I think the setTimeout noted in the other thread is in conjunction with the changes the OP of that thread is making to datatables.js. This solution is problematic in that upgrades would remove the custom changes.

A better solution might be to use the search event along with rows().every() to loop through all of the displayed child rows, ie, having class shown applied, and updating the highlight text. Here is the posted example updated:
https://jsfiddle.net/y4a2ck9z/

Kevin

silkspin

I tried the jsfiddle example above to hoping to get highlights on searches in child rows, but I'm not getting the same results. Initially the search works OK on the 3 child rows I'm using, but then it sticks when I try searching for a different word. The standard columns still function fine. The big difference is my child rows were added this way...

https://datatables.net/examples/api/row_details.html

I changed row.child( row.data()[6] ).show(); and this.child(this.data()[6]); to row.child( row.data()[6,7,8] ).show(); and this.child(this.data()[6,7,8]); but that didn't work. Is it possible to make this work with minor changes when using the Datatables example method of adding child rows? Thanks.

kthorngren

@silkspin

this.data()[6]

This is accessing array element 6.

row.data()[6,7,8]

This won't work and is probably giving an error. The value in the [] is the element within the array and is expected to be only one number. Its standard Javascript array notation.

All you really need in the search event is this statement:

this.child().highlight( $.trim( table.search().split(/\s+/) ));

The this.child() gets the current child row data. The highlight() function is then run against the text of the child row. I recreated the fiddle example using the Child Detail Rows example.

http://live.datatables.net/sehuviro/1/edit

These example use the jquery.highlight.js plugin. Take a look at the docs to see how it works.

If you still need help please post a link to your page or a test case so we can help debug. You can update my example.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

silkspin

@kthorngren I’ve just tried your example and typed in Airi (for Airi Satou) but it ignored the main table data and only highlighted “A” in the child row. I think it was because dataTables.searchHighlight.min.js was missing. I’ve added it to my example.

After more investigation I know exactly what is happening with my version when I said the first search highlighted in the child row sticks. If I close the child row and open it again then the latest search appears highlighted as it should do.

I diffed your jsfiddle and jsbin code and noticed a slight change. When I swapped this.child(this.data()); for this.child(format(this.data())); it started working with my example http://live.datatables.net/sehuviro/2/edit

Thank you for helping Kevin and pointing me in the right direction.