Question

我正在使用数据表版本1.9.4，并且在向某些行添加类时遇到问题。

我有多个数据表，都有类'display'。我正在使用jQuery选项卡在单独的选项卡上显示每个数据表。

一切都运行良好，除了我想根据列值向表行添加一个类;如果第6列小于第14列，我想添加myClass。

我找到了使用fnRowCallback的建议，但是我得到随机结果，例如有时如果第6列小于第14列，myClass会正确添加，但有时候如果第14列小于第6列myClass仍然得到了补充！

虽然这对所有行都不会发生，所以它非常随机。

这是我正在使用的代码

$(document).ready(function() {

  $('.display').dataTable({
    "bJQueryUI": true,
    "sPaginationType": "full_numbers",
    "bProcessing": true,
    "bServerSide": true,
    "bScrollCollapse": true,
    "sScrollY": "300px",
    "sAjaxSource": "ajax.php",
    "sDom": '<"H"lfr>t<"F"ipS>',
    "oScroller": {
        "loadingIndicator": true
    },
    "fnRowCallback": function( nRow, aData ) {
      var $nRow = $(nRow);
      if (aData[6] < aData[14]) {
        $nRow.addClass("myClass");
      }
      return nRow
    }
  });

});

我所做的事情有问题，还是因为我使用的是多张桌子？

Answer 1

我认为我有这个工作，但可能有一种更清洁的方式，所以如果有人知道更好的方法，请告诉我！

在绘制完表后，我会遍历每个表的所有行.......

"fnDrawCallback": function( oSettings ) {
    for (var i = 0, row; row = oSettings.nTable.rows[i]; i++) {
        price = Number(row.cells[4].innerHTML.replace(/[^0-9\.]+/g,""));
        average = Number(row.cells[6].innerHTML.replace(/[^0-9\.]+/g,""));
         if (price < average) {
             row.className = row.className + " myClass";
         }
    }
}

Answer 2

答案中的函数有效，因为它将单元格的内容类型化为类型。您的fnRowCallback不会这样做，然后表达式aData[6] < aData[14]按字母顺序评估内容（作为字符串，而不是数字）。更改问题中的fnRowCallback以使用parseFloat：

"fnRowCallback": function( nRow, aData ) {
   var $nRow = $(nRow);
   if (parseFloat(aData[6]) < parseFloat(aData[14])) {
      $nRow.addClass("myClass");
   }
   return nRow
}

参见此演示 - ＆gt; http://jsfiddle.net/davidkonrad/grvdhk1o/ 并尝试使用或不使用parseFloat。我很确定你遇到的不同之处。

jQuery Datatables突出显示行

2 个答案: