Answers

• rf1234 Posts: 2,991Questions: 87Answers: 421

  October 2020 edited October 2020 Answer ✓

  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 Posts: 251Questions: 71Answers: 0

  October 2020

  @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 Posts: 2,991Questions: 87Answers: 421

  October 2020 Answer ✓

  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 Posts: 2,991Questions: 87Answers: 421

  October 2020 edited October 2020 Answer ✓

  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 Posts: 251Questions: 71Answers: 0

  October 2020 edited October 2020

  @rf1234

  using

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

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