highlight a specific row programatically

jsorger

Description of problem: I link datatables to a network representation and automatically scroll to the respective row in the respective table when hovering over a node in the network. however, I cannot figure out how to programatically highlight a certain node. (all forum entries regarding this topic seem to concern only "on mouse over" events.)

Link to test case: https://csh.ac.at/covid19/cccsl_measure_graph/

I'm trying this

table.row(foundindex).scrollTo();

$( table.rows() ).removeClass( 'highlight' );
$( table.row(foundindex) ).addClass( 'highlight' );

scrolling works but highlighting does not. what am I doing wrong?

I tried loading the css before and after the datatable's css but it did not have any effect.

td.highlight {
background-color: cornflowerblue !important;
}

kthorngren

To highlight a Datatable row you will need a CSS more like this:

table#example.dataTable tbody tr.highlight {
  background-color: cornflowerblue !important;
}

table#example.dataTable tbody tr.highlight > .sorting_1 {
  background-color: cornflowerblue !important;
}

Change example to the id of your table tag.

Kevin

jsorger

thank you @kthorngren, I just realized that my js code did not add/remove any classes to the table elements in the DOM. I had to call .nodes() on the respective row elements.

$( table.rows().nodes() ).removeClass( 'highlight' );
$( table.row(foundindex).nodes() ).addClass( 'highlight' );