title: jQuery DataTables add class to row on event based on table data
body: <p>I'm trying to code a button click in jQuery that will search all the row data returned from DataTables, find only rows that have an email address, then add the <code>.selected</code> class to that particular row.</p>
  
  <p>I have been able to get the following code to work just fine, but it only adds the <code>.selected</code> class to the current view of the table.  Not the entire data set.  So, when the user switches pages or narrows the search the data that should have the <code>.selected</code> class does not have it.</p>
  
  <pre><code>$( '#testButton' ).click(function(){
      $( '#table tr' ).each( function (){
          var rowData = oTable.row( this ).data();
          if( rowData !== undefined ){
  
              if( rowData.email.length &gt; 4 ){
                  //console.log( "found an email :"+rowData.email );
                  $( this ).addClass( 'selected' );
              }
  
          }
      });
  }    
  </code></pre>
  
  <p>Here is the jQuery code I have tried to use, but I can't get it to work correctly.  It does seem to add the <code>.selected</code> class however, it's not adding it to the correct rows.  It seems to be randomly adding the <code>.selected</code> class to rows.  The weird thing though is the console output line is identifying the correct row indexes and email addresses based on the json data set.  Does anyone know how to correctly do what I'm attempting to do?</p>
  
  <pre><code>var oTable = $( '#table' ).DataTable({
      'ajax': {
          url: 'get-json-data.php',
          type: "POST",
          dataSrc: function ( data ) {
                  return data;
              },       
      },
     'columns': [
              { 
                  "data": "name",                   
                  "render": function ( data, type, row ) {
                          return "&lt;a id='"+row.id+"'&gt;"+data+"&lt;/a&gt;";
                  }
              },
              { 
                  "data": "company",                    
                  "render": function ( data, type, row ) {
                          return data;
                  }
              }   
      ],
      stateSave: true,
      responsive: true,
      createdRow: function ( row, data, index ) {
          row.setAttribute( 'id',data.id );       
      }
  });
  
  $( '#testButton' ).click(function(){
      var rowData = oTable.rows().data();
      $( rowData ).each( function ( i, e ){
          if( rowData[i].email !== undefined ){
  
              //only show data long enough to be an actual email address
              if( rowData[i].email.length &gt; 5 ){
  
                  // this shows the correct information
                  console.log( "On row "+i+" found this :"+rowData[i].email+" address" );
  
                  // this applies the selected class to the wrong row
                  $(oTable.row(i).node()).addClass('selected');
              }
  
          }
      });
  });
  </code></pre>
  
  <p>sample json data set returned from <code>get-json-data.php</code>:</p>
  
  <pre><code>{"id","1","name":"someName","email":"","company":"companyName"},
  {"id","2","name":"someName1","email":"test1@test1.com","company":"companyName1"},
  {"id","3","name":"someName2","email":"test2@test2.com","company":"companyName2"}
  </code></pre>
  
  <p>BTW: I'm using the jQuery DataTables plugin available <a href="https://datatables.net/" rel="nofollow noreferrer">Here</a> version 1.10.15</p>