突出显示包含相同列信息的数据表行

Question

我有一个 Datatables 表，我需要突出显示在 col 2 和 col 3 中具有相同值的行。如果一行具有相同的 2 个值，则突出显示它们。在 Datatables 中最好的方法是什么。

目前我有一个 JQuery 函数，将 2 个值组合到一个字符串和搜索表中。但它效率不高且速度慢，如果超出第 1 页，则无法找到重复项。

这里是一个例子：http://jsfiddle.net/f9gs8ywt/1/

var data = { 
    data : [
         { id : 1, car: "toyota", order: "53421" },
         { id : 2, car: "ford", order: "53421" },
         { id : 3, car: "chevrolate", order: "13255" },
         { id : 4, car: "mazda", order: "23155" },
         { id : 5, car: "toyota", order: "51234" },
         { id : 6, car: "ford", order: "53421" },
         { id : 7, car: "BMW", order: "31312" },
         { id : 8, car: "Audi", order: "53412" },
         { id : 9, car: "toyota", order: "51234" },
         { id : 10, car: "BMW", order: "42123" },
         { id : 11, car: "Honda", order: "42153" },
         { id : 12, car: "Jeep", order: "31245" },
         { id : 13, car: "Lexus", order: "12344" },
         { id : 14, car: "toyota", order: "53421" },
         { id : 15, car: "Hyundai", order: "23411" },
         { id : 16, car: "Kia", order: "32415" },
         { id : 17, car: "toyota", order: "51234" },
         { id : 18, car: "Hyundai", order: "35123" }
     ]
 }

var table = $('#example').DataTable({
    data : data.data,
    columns : [
        { data: 'id', title: 'id' },
        { data: 'car', title: 'car' },
        { data: 'order', title: 'order' },    
    ]  
})  

table.draw()

Answer 1

您可以参考this answer，它通过根据列值将 CSS 类分配给行来解决问题。

具体代码使用fnRowCallback（也可以使用较新的rowCallback）如下图：

$('#example').dataTable({
    "fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
        // aData is the columns array, and you can get
        // the required value using the correct index
        switch(aData[0]){
            case 'toyota':
                $(nRow).css('color', 'red')
                break;
            case 'audi':
                $(nRow).css('color', 'green')
                break;
            case 'lexus':
                $(nRow).css('color', 'blue')
                break;
        }
    }
});

希望这会有所帮助。

Answer 2

还有其他方法，我只是给你，你如何通过添加额外的列来添加不同颜色的类来显示相似的行，使用数据表createdRow

var data = { data : [{ id : 1, car: "toyota", order: "53421" },    { id : 2, car: "ford", order: "53421" },    { id : 3, car: "chevrolate", order: "13255" },    { id : 4, car: "mazda", order: "23155" },  { id : 5, car: "toyota", order: "51234" },  { id : 6, car: "ford", order: "53421" },  { id : 7, car: "BMW", order: "31312" },  { id : 8, car: "Audi", order: "53412" },  { id : 9, car: "toyota", order: "51234" },  { id : 10, car: "BMW", order: "42123" },  { id : 11, car: "Honda", order: "42153" },  { id : 12, car: "Jeep", order: "31245" },  { id : 13, car: "Lexus", order: "12344" },  { id : 14, car: "toyota", order: "53421" },  { id : 15, car: "Hyundai", order: "23411" },  { id : 16, car: "Kia", order: "32415" },  { id : 17, car: "toyota", order: "51234" },  { id : 18, car: "Hyundai", order: "35123" }]};

var colors = ["red","green","blue","grey","pink","brown"];
var temp = {};
for(let i in data.data){
  if(data.data[i].car in temp){
    data.data[i].color = temp[data.data[i].car];
  }else{
    var index = getRandom(colors.length);
    var color = colors.pop();
    temp[data.data[i].car] = color;
    data.data[i].color = color;
  }
}
function getRandom(num){
  return Math.floor(Math.random() * num);
}

//console.log(data.data);

var table = $('#example').DataTable({
	data : data.data,
  columns : [
    { data: 'id', title: 'id' },
    { data: 'car', title: 'car' },
    { data: 'order', title: 'order' },    
  ],
  createdRow: function( row, data, dataIndex){
    $(row).addClass(data.color);
  }
})  

table.draw();

.red{
  color:red;
}
.gren{
  color:green;
}
.blue{
  color:blue;
}
.grey{
  color:grey;
}
.pink{
  color:pink;
}
.brown{
  color:brown;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.9/js/jquery.dataTables.js"></script>
<script src="https://cdn.datatables.net/rowreorder/1.0.0/js/dataTables.rowReorder.js"></script>

<link href="http://cdn.datatables.net/rowreorder/1.0.0/css/rowReorder.dataTables.css" rel="stylesheet"/>

<link href="http://cdn.datatables.net/1.10.0/css/jquery.dataTables.css" rel="stylesheet"/>
<table id="example"></table>

添加更多颜色或使其充满活力

Answer 3

无论哪种方式，您都必须将 car 和 order 值与所有其他行进行比较，因为这是标记重复的标准。也许有一些聪明的方法，但你可以让一个函数 map 数据并添加一个 className 如果存在任何重复：

function getData(data) {
  return data.data.map(function(d) {
    for (var i=0,l=data.data.length; i<l; i++) {
      var c = data.data[i];
      if (d.car == c.car && d.order == c.order && d.id != c.id) {
        d.className = 'highlight';
        return d
      }
    }
    return d
  })
}

它只是将每个项目与所有其他项目进行比较，如果找到匹配项，它会将className 添加到项目并跳出循环。

var table = $('#example').DataTable({
   data : getData(data),
   columns : [
     { data: 'id', title: 'id' },
     { data: 'car', title: 'car' },
     { data: 'order', title: 'order' },    
   ],
   rowCallback: function(node, data) {
     if (data.className) $(node).addClass(data.className)
   }
})  

http://jsfiddle.net/0kdd3894/