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

Question

我有这个脚本可以工作并且可以满足我的需要，但它只适用于前 10 行，不适用于下一页。我的 Table 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

Answer 1

只有数据表中可见的行实际上在 DOM 中。因此，您可以在每次页面更改时调用 $.each 循环，或者（我认为更好）使用 https://datatables.net/reference/option/createdRow or 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;
      }
    }
  }]
});

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

Applying CSS to Datatables that has NEXT Page

javascript

php

jquery

datatables-1.10