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

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

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

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


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

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


  1. 後から調べてみたら、 tablesorter (unofficial fork) という同様の機能を満たすものがあった。けど機能が多すぎるしアップデートがあった時とかに何かつまづくのも嫌なのでやっぱり自分はこの記事の方法を使いそう。 ↩︎

Profile

石原 悠 / Yu Ishihara

デザインとプログラミングとヨーグルト作りが好きです。 🐥 🐙