デモ
前提として jquery.js と jquery.datatable.js を読み込んでおく必要があります
See the Pen by qwe001 (@qwe001) on CodePen.
実装
/**
* 重複セルをチェックする
*/
function isDuplicateColumn(item, arr, key)
{
var ret = false;
var sameValues = arr.filter(function(elem) {
return elem[key] === item[key];
});
if(sameValues.length > 1){
ret = true;
}
return ret;
}
"preDrawCallback": function(settings){
var api = this.api();
var items = api.rows().data();
// 重複セルをチェックする
items.map(function(item, idx, arr){
item.is_duplicate_code = isDuplicateColumn(item, arr, "code");
item.is_duplicate_name = isDuplicateColumn(item, arr, "name");
return item;
});
},
データ取得が完了したタイミングで重複チェックを実行。
データに「is_duplicate_{key}」プロパティを埋め込んで、
同じ値がある場合にフラグを立てておきます
"rowCallback" : function(row, item){
// 商品コード
if(item.code){
// 重複セルをハイライト
if(item.is_duplicate_code){
$('td.dt-column-code', row).addClass("same");
}
}
// 名前
if(item.name){
// 重複セルをハイライト
if(item.is_duplicate_name){
$('td.dt-column-name', row).addClass("same");
}
}
},
各行ごとの描写処理を行うタイミングでフラグ状態を確認して条件分岐させます。
あとは色を変えるなりお好きに。
もっとスマートな実装をご存知の方がいましたら、
教えて頂けると嬉しいです。