Tablesorterプラグインでソートしたくない列をデータ属性で指定する

テーブルの列にソート機能をつける時はjQueryの Tablesorter プラグインを使用する事が多い。

このプラグインは初期化するとデフォルトではすべての列がソートできるようになっているが、テーブルの内容によっては特定の列（例えば編集ボタンの列とかチェックボックスが入っている列など）はソートしてほしくない、なんて事もよくある。 なのでその場合は初期化の際に {headers: {0: sorter: false}} とかのオプションをつける事でソートしない列を指定する事が可能になっている。

サイト内に別々の種類のカラムを持っているテーブルが複数ある場合、テーブル毎に初期化のJSを別々で書いていたら非常に面倒なので th タグに datasort="false" みたいな感じでデータ属性を追加しておいて、データ属性が追加されている場合はそれを渡すように書いておくのが手っ取り早そう。¹

$(".js-tablesorter").each(function(index, el) {
  var hasSorter = [];
  $("th", el).each(function(i, e) {
    if($(e).data('sorter') != undefined) {
      var option = {
        id: i,
        sorter: $(e).data('sorter')
      };
      hasSorter.push(option);
    }
  });
  var options = {headers: {}};
  for (var i = 0; i < hasSorter.length; i++) {
    options['headers'][hasSorter[i]['id']] = {sorter: hasSorter[i]['sorter']}
  };
  $(el).tablesorter(options);
});

See the Pen reLVQo by u (@is8r) on CodePen.

細かく sorter のオプションを指定したい時には data-sorter に false ではなくて digit とか text とかを入れれば良いようにもしておいた。 簡単な事なんだけどすぐに忘れそうなのでメモ。