0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

jquery.datatable.jsで重複するセルをハイライト表示する

Last updated at Posted at 2021-08-01

デモ

前提として 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");
        }
      }
    },

各行ごとの描写処理を行うタイミングでフラグ状態を確認して条件分岐させます。
あとは色を変えるなりお好きに。

もっとスマートな実装をご存知の方がいましたら、
教えて頂けると嬉しいです。

0
0
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?