将数据表条件格式化为特定列中的特定值

Question

所以我有以下模板：

 {% load static %}
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

 <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
 <script src="https://cdn.jsdelivCSAT.net/npm/poppeCSAT.js@1.16.1/dist/umd/poppeCSAT.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
 <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
 <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
 <script src="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css"></script>

 <div class="table-responsive-sm" style="overflow:scroll">
  <table class="table table-striped  table-bordered table-hover" id="example">
  <thead class="thead-dark">
    <tr>
        <th colspan="12" scope="colgroup"></th>
    </tr>
    <tr>
        <th>A</th>
        <th>B</th>
        <th>C</th>
        <th>D</th>
        <th>E</th>
        <th>F</th>
    </tr>
    
</tbody>    
<tfoot>
    <tr>
        <th>A</th>
        <th>B</th>
        <th>C</th>
        <th>D</th>
        <th>E</th>
        <th>F</th>
        <th>F</th>
    </tr>
</tfoot>
</table>
</div>

在 C、D 和 E 列中显示了以下值：R、G、Y（红色、绿色、黄色）

我有以下脚本：

<script>
$(document).ready(function() {    
     $('#example').DataTable( {
         initComplete: function () {
             this.api().columns().every( function () {
                 var column = this;
                 var select = $('<select><option value=""></option></select>')
                     .appendTo( $(column.footer()).empty() )
                     .on( 'change', function () {
                         var val = $.fn.dataTable.util.escapeRegex(
                             $(this).val()
                         );

                         column
                             .search( val ? '^'+val+'$' : '', true, false )
                             .draw();
                     } );

                 column.data().unique().sort().each( function ( d, j ) {
                     select.append( '<option value="'+d+'">'+d+'</option>' )
                 } );
             } );
         }
     } );

 } );

我想做的是将 C、D 和 E 列的每个单元格中的颜色对应于在各个单元格中找到的值（R=红色、G=绿色、Y=黄色）。我通过复制此脚本设法制作了一个工作数据 tables，但我不知道如何实现可以使 table 更改单元格颜色的有效代码。有人可以将代码插入脚本并告诉我发生了什么吗？谢谢大家

Answer 1

据我所知，最简单的方法是使用 columnDefs.render 选项，并提供一些支持 CSS.

这是 CSS，在我的例子中，我将其包含在 HTML 页面的 <head> 部分：

<style>

  .bg_red {
    background-color: red !important;
  }

  .bg_yellow {
    background-color: yellow !important;
  }

  .bg_green {
    background-color: green !important;
  }

</style>

注意 CSS 中 !important 的使用。这有点粗糙，但这意味着 CSS 覆盖了 DataTables 可能应用的任何行阴影（例如所谓的“斑马条纹”）。

我的测试 table 只是以下硬编码 HTML:

    <table id="example" class="display dataTable cell-border" style="width:100%">
        <thead>
            <tr><th>A</th><th>B</th><th>C</th></tr>
        <thead>
        <tbody>
            <tr><td>R</td><td>R</td><td>Y</td></tr>
            <tr><td>Q</td><td>X</td><td>G</td></tr>
        </tbody>
    </table>

DataTables函数如下：

<script type="text/javascript">

  $(document).ready(function() {

    $('#example').DataTable( {
      columnDefs: [ {
        targets: [1, 2], 
        "render": function ( data, type, row, meta ) {
          var table = $('#example').dataTable().api();
          if (type === 'display') {
            var node = table.cell(meta.row, meta.col).nodes().to$();
            if ( data === 'R' ) {
              node.addClass('bg_red');
            } else if ( data === 'G' ) {
              node.addClass('bg_green');
            } else if ( data === 'Y' ) {
              node.addClass('bg_yellow');
            }
          }
          return data;
        }
      } ]
    } );

  } );

</script>

targets: [1, 2] 选项意味着呈现逻辑将仅应用于我的 table 中的第 2 和第 3 列（第一列的索引为零）。

type === 'display'选项意味着我们只检查每个单元格的显示值。这 can be different 来自过滤器和排序值。在我的简单案例中没有区别，但是明确处理这个是个好主意。

呈现逻辑将相关的 class 名称添加到 table 的 <td> 标记 - 这是 DOM 的一部分，而不是 DataTables 本身的一部分.这就是我们访问每个单元格的 node 对象的原因。

使用此 render 函数还意味着即使您对 table 进行排序和过滤，格式也会跟随数据。否则，错误的单元格会在您 sort/filter.

之后突出显示

将数据表条件格式化为特定列中的特定值

Conditional formatting Datatables to specific values in specific columns

javascript

django

jquery

conditional-formatting

datatables