Highlight.js and Sliding Child Rows

silkspin

My child rows worked fine until I decided to animate them using this method https://datatables.net/blog/2014-10-02

After the change, when I searched while a child row was open, the row would close but indicate it was still open with the "minus" icon visible. If I also used the drop down filters on a column it would do the same, but after a process of elimination I've found code that fixed a previous problem was causing it. Previously highlight.js wouldn't highlight searches on child rows that were already open. If I remove the following code the child rows don't disappear when using search.

      table.on( 'search.dt', function () {
        table.rows('.shown').every( function ( rowIdx, tableLoop, rowLoop ) {
          this.child(format(this.data()));   
          this.child().highlight( $( table.search().split(/\s+/)) );
        } );
      } );

Is there something that can be changed to be able to use both features?

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

kthorngren

Looks like you can skip calling the format() function when highlighting the child rows:
http://live.datatables.net/sehuviro/8/edit

Kevin

silkspin

Hi Kevin. I'd previously tried that and it does stop the child row disappearing but then it only searches on the first character in a search string. For example, if you search on "air" the normal rows show "air" highlighted but the child row only shows instances of "a".

silkspin

Removing div.slider {display: none;} from the CSS actually allows the visible child rows to show highlighted text from a search. However, the down animation for the child row doesn't work after that, but the up animation does. I would assume this is because div.slider isn't in the DOM on the initial page load.

In the first test case after showing the child row then adding search text, the child row disappears but the red minus icon still there. Click that twice and the child row is restored with the searched text highlighted. I just don't know why it's disappearing in the first place?

silkspin

I managed to work out a fix. http://live.datatables.net/sehuviro/11/edit

I added $('div.slider', this.child()).show(); to the highlight function to force the child row to stay open after calling the format function.