Applying CSS to Datatables that has NEXT Page [closed]

I have this Script that works and does what I need, but it will only apply to the first 10 rows, not to the next page. My Table id is “MyTable” Here is my JavaScript:

                $(document).ready(function()
                            {
                                $(function() 
                                    {
                                      $("#MyTable td").each(function() 
                                      {
                                        if ($(this).text() == 'Pending') 
                                            {
                                              $(this).css('background-color', 
                '#F3E498');
                                            }
                                        if ($(this).text() == 'Approved') 
                                            {
                                              $(this).css('background-color', 
                '#C5F97E');
                                            }
                                        if ($(this).text() == 'Denied') 
                                            {
                                              $(this).css('background-color', 
                '#FF5733');
                                            }
                                        
                                      });
                                    });
                            });

So needless to say I am kida stuck here where at row 11th, my script quits working through next pages, I would appreciate any suggestions. See Image here

Answer

Only rows that are visible in the datatable are actually in the DOM. Therefore you could either call your $.each loop each time the page changes or (I think better) use https://datatables.net/reference/option/createdRow or https://datatables.net/reference/option/columns.createdCell

Here’s a working JSFiddle: https://jsfiddle.net/dhqcekm9/

CSS

.approved {
  background-color: #C5F97E;
}

.denied {
  background-color: #FF5733;
}

.pending {
  background-color: #F3E498;
}

HTML

<table id="table">
  <thead>
    <th>ID</th>
    <th>Status</th>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Approved</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Denied</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Approved</td>
    </tr>
    <tr>
      <td>4</td>
      <td>Pending</td>
    </tr>
    <tr>
      <td>5</td>
      <td>Pending</td>
    </tr>
    <tr>
      <td>6</td>
      <td>Pending</td>
    </tr>
    <tr>
      <td>7</td>
      <td>Pending</td>
    </tr>
    <tr>
      <td>8</td>
      <td>Pending</td>
    </tr>
    <tr>
      <td>9</td>
      <td>Denied</td>
    </tr>
    <tr>
      <td>10</td>
      <td>Pending</td>
    </tr>
    <tr>
      <td>11</td>
      <td>Pending</td>
    </tr>
    <tr>
      <td>12</td>
      <td>Approved</td>
    </tr>
    <tr>
      <td>13</td>
      <td>Denied</td>
    </tr>
  </tbody>
</table>

Javascript

$('#table').dataTable({
  'columnDefs': [{
    'targets': 1,
    'createdCell': function(td, cellData, rowData, row, col) {
      switch (cellData) {
        case 'Approved':
          $(td).addClass('approved');
          break;
        case 'Denied':
          $(td).addClass('denied');
          break;
        case 'Pending':
          $(td).addClass('pending');
          break;
      }
    }
  }]
});