11

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

当第 4 列的值 == 0 且第 5 列的值为 !=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>
4

1 回答 1

17

更新。最初的答案是针对 dataTables 1.9.x。它仍然有效，并且也适用于 dataTables 1.10.x（到目前为止），但这是一个纯 dataTables 1.10.x 版本：

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/

您应该fnRowCallback为此使用事件。从文档：

此功能允许您在为每个表格绘制生成之后但在其呈现在屏幕上之前“后处理”每一行。此函数可用于设置行类名称等。

所以在你的情况下，这样做：

$("#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/中查看它的实际效果

于 2013-11-01T17:18:59.990 回答