将CSS应用于具有下一页的数据表

问题描述

我有这个脚本可以正常工作并满足我的需要，但它仅适用于前10行，不适用于下一页。 我的表ID是“ MyTable”，这是我的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');
                        }
                    
                  });
                });
        });

不用说，我被困在基达的第11行，我的脚本退出了下一页的工作，我将不胜感激。 See Image here

解决方法

只有在数据表中可见的行才在DOM中。因此，您可以在每次页面更改时调用$ .each循环，或者（我认为更好）使用https://datatables.net/reference/option/createdRow或https://datatables.net/reference/option/columns.createdCell

这是正在工作的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;
      }
    }
  }]
});