how to find a specific row by string matching?

jsorger

I'm facing the issue that I cannot find a row by its content.
this code filters rows by a filter string and compares the string to the row's content.
however I get completely wrong results.

let foundindex = 0;
var filteredData = table.column( 0 )
    .data()
    .filter( function ( value, index ) {
        if(value === filter) {
            foundindex = index;
            // console.log("found:", index);
        }
        return value === filter ? true : false;
    } );
table.row(foundindex).scrollTo();
$( table.rows().nodes() ).removeClass( 'highlight' );
$( table.row(foundindex).nodes() ).addClass( 'highlight' );

this does not actually find the matching.
what am I doing wrong?

https://csh.ac.at/covid19/cccsl_measure_graph/

jsorger

it seems foundindex in table.row(foundindex) does not actually correspond to the row's index in the table?

kthorngren

What do we need to do to see this code execute?

Which table are we looking at? Looks like there are multiple Datatables.

What is the value of the variable filter?

What JS files do we need to look at?

Kevin

jsorger

I output the found row object now in the browser console.
I'm able to retrieve the correct row object. however I cannot find the appropriate index.
I also tried to feed the row object directly into the scrollTo() and addClass() methods but without success.

filteredData.row().scrollTo();
$( table.rows().nodes() ).removeClass( 'highlight' );
$( filteredData.row().node() ).addClass( 'highlight' );

jsorger

@kthorngren to see the issue, you need to hover over the nodes in the network. the top nodes (green) correspond to the top table. when hovering on a node, the table executes the code posted above. in the browser console you can see that the correct row object is retrieved - but the scrolling and highlighting of the correct row fails, since I'm retrieving a wrong index from the row object.

jsorger

@kthorngren if you click on the console message after hovering over a node in the network, you will jump to this method in the code. filter is the label of the graph node which will match one of the table rows in the respective table.

however, filteredData does not seem to be a row object.

is there a better way to search for a matching row and retrieve its index for proper highlighting and jumping to?

 function highlighRow(tableid, filter)
 {

var table = $('#'+tableid).DataTable();

//==> this only yields the filtered rows but does not filter the table itself
let foundindex = 0;
var filteredData = table.column( 0 )
    .data()
    .filter( function ( value, index ) {
        if(value === filter) {
            foundindex = index;
            // console.log("found:", index);
        }
        return value === filter ? true : false;
    } );

console.log(filteredData);

console.log(filteredData.row().index());
table.row(foundindex).scrollTo();

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

}

kthorngren

since I'm retrieving a wrong index from the row object.

The index is the order the table is displayed but that might not be the original order of the table. You might be able to use selector-modifier to get the correct row, maybe something like this:

table.row(foundindex, {order:'current'} ).scrollTo();

You can do something similar to using filter() by using row() with a row-selector as a function, the docs have an example. Then you will just get the row API and you can use it something like this:

row.scrollTo();

EDIT: Here is a simple example:
http://live.datatables.net/juyunifo/1/edit

Kevin

jsorger

@kthorngren thank you so much, it works!

the snippet from your example did the trick.
I definitely owe you a beer now.