Applying CSS to Datatables that has NEXT Page [closed]

Tags: , , ,



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;
      }
    }
  }]
});

JSFiddle Datatable page 2



Source: stackoverflow