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

前端之家收集整理的这篇文章主要介绍了jquery – 如何使用datatables.js应用条件格式?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个使用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>

解决方法

更新.最初的答案是针对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事件.来自文档:

@H_301_16@

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.

所以在你的情况下,这样做:

$("#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/

猜你在找的jQuery相关文章