jQuery Datatables 突出显示行

Posted 2023-05-07

【中文标题】jQuery Datatables 突出显示行

【英文标题】：jQuery Datatables highlighting row

【发布时间】：2014-10-03 13:33:01

【问题描述】：

我使用的是 1.9.4 版数据表，但在向某些行添加类时遇到问题。

我有多个数据表，都带有“显示”类。我正在使用 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
    
  );

);

我所做的是否有问题，或者是因为我使用了多个表？

【问题讨论】：

这个问题肯定与我在不同选项卡上有表格的事实有关。我在 fnRowCallback 函数中添加了一个 alert(aData[6]) 和 alert(aData[14]) ，我从选项卡 2 的表中获取 aData[6] 值，奇怪的是从标签 4 上的表格！关于如何解决这个问题的任何想法？

【参考方案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";