如何使用datatables.js应用条件格式? [英] How do I apply conditional formatting using datatables.js?

问题描述

我有一个使用datatables.js的html表，却找不到如何应用条件格式的清晰示例.

I have a html table that uses datatables.js and have not been able to find a clear example of how to apply conditional formatting.

当第4列的单元格的值== 0且第5列的值为！= 0时，如何更改单元格的文本颜色

How could I change the text color of a cell in column 4 when its value == 0 and the value in column 5 is !=0

<script>
      $(document).ready(function () {
        $("#GeneratedData").dataTable({
          "sDom": 'T<"clear">lrtip',
          "oTableTools": {
            "sSwfPath": "http://localhost:5637/Content/swf/copy_csv_xls_pdf.swf"
          },
           "sPaginationType": "full_numbers"
        });
      })
</script>

推荐答案

更新.最初的答案是针对dataTables1.9.x.它仍然可以使用，并且也可以与dataTables 1.10.x一起使用(到目前为止)，但这是一个纯dataTables 1.10.x版本:

Update. The original answer were targeting dataTables 1.9.x. It still works, and works with dataTables 1.10.x as well (so far) but here is a pure dataTables 1.10.x version :

var table = $('#example').DataTable({
  rowCallback: function(row, data, index) {
    if (data[3]=='0' && data[4]!='0') {
      $(row).find('td:eq(3)').addClass('color')
    }   
  }
})

演示-> http://jsfiddle.net/2chjxduy/

demo -> http://jsfiddle.net/2chjxduy/

为此，您应该使用 fnRowCallback 事件.从文档中:

You should use the fnRowCallback event for this. From the docs :

此功能使您可以在行之后对每行进行后处理" 为每个表格绘制生成，但在屏幕上呈现之前. 此功能可能用于设置行类名称等.

This function allows you to 'post process' each row after it have been generated for each table draw, but before it is rendered on screen. This function might be used for setting the row class name etc.

因此，在您的情况下，请执行以下操作:

So in your case, do this :

$("#GeneratedData").dataTable({
   //your settings as above here
   fnRowCallback: function(nRow, aData, iDisplayIndex, iDisplayIndexFull) {
       if ($(nRow).find('td:eq(3)').text()=='0' &&
           $(nRow).find('td:eq(4)').text()!='0') {
              $(nRow).find('td:eq(3)').addClass('color');
           }   
    }
});

color是预定义的CSS类.在此jsfiddle中查看实际操作-> http://jsfiddle.net/GfNeA/

color is a predefined CSS class. See it in action in this jsfiddle -> http://jsfiddle.net/GfNeA/

这篇关于如何使用datatables.js应用条件格式?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！