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

Question

我有一个数据表，我需要突出显示第 2 列和第 3 列中具有相同值的行。如果一行具有相同的 2 个值，则突出显示它们。在数据表中执行此操作的最佳方法是什么。

目前我有一个 JQuery 函数将两个值组合成一个字符串并搜索表。但它效率不高且速度慢，并且如果超出第 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;
        }
    }
});

希望这有帮助。