highlight 동일한 열 정보를 포함하는 Datatables 행

Question

col 2와 col 3에서 동일한 값을 가진 행을 강조 표시해야하는 Datatables 테이블이 있습니다. 행에 동일한 2 개의 값이 모두 강조 표시되어있는 경우. Datatables에서 그렇게하는 가장 좋은 방법은 무엇입니까?

현재 JQuery 함수를 사용하여 2 개의 값을 단일 문자열과 검색 테이블에 결합했습니다. 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

당신은 CSS 클래스를 할당하여 문제를 해결 this answer를 참조 할 수 있습니다 :하지만 효율적이고 느리고 그들이 여기

페이지에서 1. 외출하는 경우 중복을 찾을 수 없습니다은 예입니다 열 값을 기준으로 행을 정렬합니다.

는 특히 코드는 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({ 
 
\t 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>

와 유사한 행을 DISPALY 서로 다른 색상으로 클래스를 추가 할 또한, 난 그냥 여분의 열을 추가하여 달성 할 수있는 방법, 당신을 제공하는 다른 방법이있을 것

색상을 추가하거나 동적으로 변경하십시오.

Answer 3

어느 방법이든간에 car과 order은 중복을 표시하는 기준이므로 다른 모든 행에 대한 값입니다. 아마도이 영리한 방법이 있습니다,하지만 당신은 함수 map 데이터를 보자 중복이 존재하는 경우 className을 추가 할 수 일치가에 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 
    }) 
} 

그것은 단순히 다른 모든 항목과 각 항목을 비교 항목과 루프 밖으로 점프.

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/