Comparing data in two Datatable and highlighting the common data

Khalid Teli

I have two tables with different no of columns as shown in the picture below.

I want to compare the data in Table-2 with data in Tbale-1

if there are matching records , it should highlight the data in Table-2

Is there a way to do this in datatable?

rf1234

Something like this should work - provided the first table's initialization finishes before the second table's.

table2
    .on('init', function () { 
        var i; var y;
        var table2Length = table2.rows().count();
        var table1Length = table1.rows().count();
        for ( i=0; i < table2Length; i++ ) {
            //get the current node in order to assign the class in the inner loop
            var table2Row = table2.row(i).node();
            //get the current data in order to compare with the first table
            //in the inner loop
            var table2Data = table2.row(i).data();
            for ( y=0; y < table1Length; y++ ) {
                var table1Data = table1.row(y).data();
                if ( table1Data.product_id === table2Data.product_id &&
                     table1Data.product_name === table2Data.procut_name ) {
                    // change background color using your own CSS
                    $(table2Row).addClass('yourClassToChangeColor');
                    break; //if there may be multiple matches: no break!!
                }                       
            }
        }
    });

Khalid Teli

@rf1234
Thankyou. It works perfect!

However , on the search, the background color applied using css disappears. How can we put in 'search applied' so it is still valid while searching datatble?

rf1234

However , on the search, the background color applied using css disappears. How can we put in 'search applied' so it is still valid while searching datatble?

That surprises me! If a colored row is found it should still have the background color assigned on init. Maybe somebody else has an idea?

I have just checked my own code: I assign different fonts using rowCallback. Just entered a search term leaving only one record to display: The changed font was still there, no problem.

Maybe it is the wrong event? Try this instead of on "init".

table2
    .on('draw', function () {

rf1234

Alternative solution using "rowCallback" on table2. This is basically how I use it myself. And I have no issues with the fonts when searching.
https://datatables.net/reference/option/rowCallback

var table1Length; //global variable

table1
    .on('draw', function () {
        table1Length = table1.rows().count();
    });

var table2 = $('#table2').DataTable({
    dom: "Bfrltip",
    columns: [ .... ],
    buttons: [ ... ],
    //rowCallback in the definition of table2 
    //rowCallback replaces the outer loop
    rowCallback: function (table2Row, table2Data) {
        for ( var y=0; y < table1Length; y++ ) {
            var table1Data = table1.row(y).data();
            if ( table1Data.product_id === table2Data.product_id &&
                 table1Data.product_name === table2Data.procut_name ) {
                // change background color using your own CSS
                $(table2Row).addClass('yourClassToChangeColor');
                break; //if there may be multiple matches: no break!!
            }                      
        }
    }
});

Khalid Teli

@rf1234

using

 table2
    .on('draw', function () {

did the trick.
Thank you very much. Really appreciate your help