highlight Datatables rows that contain same column information

Question

I have a Datatables table that i need to highlight rows that have same value in col 2 and col 3. if a row have the same 2 values highlight both of them. whats the best way to do that in Datatables.

currently i'm having a JQuery function the combine the 2 values to a single string and search tables. but its not efficient and slow and can't find duplicates if they go out of page 1.

here is an example: 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

Either way you will have to compare car and order values to all other rows, since this is the criteria for marking a duplicate. Perhaps there are clever ways, but you could let a function map data and add a className if any duplicate exists:

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
  })
}

It simply compare each item with all other items, if a match is found it adds a className to the item and jumps out of the loop.

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/

Answer 2

There would be other ways also, I just giving you, how you can achieve by adding extra column to add class with different color to dispaly similar rows, With datatable 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>

Add more color or make it dynamic

Answer 3

You can refer to this answer which solves the problem by assigning CSS classes to rows based on column values.

Specifically the code uses the fnRowCallback (or you can use the newer rowCallback) as shown below:

$('#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;
        }
    }
});

Hope this helps.