如何使用datatables.js应用条件格式?

mmi*_*lan 9 jquery datatables

我有一个使用datatables.js的html表,并且无法找到如何应用条件格式的明确示例.

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

<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>
Run Code Online (Sandbox Code Playgroud)

dav*_*rad 14

更新.最初的答案是针对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')
    }   
  }
})
Run Code Online (Sandbox Code Playgroud)

演示 - > 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');
           }   
    }
});
Run Code Online (Sandbox Code Playgroud)

color是一个预定义的CSS类.在这个jsfiddle中看到它的实际效果 - > http://jsfiddle.net/GfNeA/