javascript でテーブルをソートする方法


javascript を使ってテーブルをソートすることになった。ドットインストールを見ると複数項目でソートする方法まで載っている・・・が、これを一般化してどんなテーブルでもソートできるようにするにはどうするか考えてみた。公開されているライブラリもあるんですけどね。

コードは次のとおり。

sortFunction.sort でテーブルをソートして、 ▼(▲) の表示をする。 sort に渡すのは、 order_array, sort_array, クリックされた th 自身 (this) の 4つ。 各パラメータについて下に説明を書いた。

order_array

各列の初期状態の昇順・降順を設定しておく。4列ある場合は [1, 1, 1, 1] のようにする。 1 が昇順、 -1 が降順を表す
。 初期状態でソートされていない場合でも 1 と書いて構わない。

ソートをするときに 昇順・降順 が入れ替わる場合は 該当する値を 1 と -1 で入れ替える。 SQL の order by でいうところの ASC, DESC 。

sort_array

初期状態で何番目のカラムでソートされているかを表す配列。 1列目と2列目でソートされており、1列目で最初にソートされている場合は [0, 1] と書く。 特にソートされていない場合は [] と書く。

最後にソートされた列の index は 配列の先頭に追加する。 SQL の order by でいうところの カラム の順序。

this (th)

どの列がクリックされたかを特定するために、クリックされたものを渡す。

注意点

  • 並べ替えられるオブジェクトに対して $(object).click() のようにしてイベントを記述している場合、並べ替え後に同じことをやる必要がある。
  • 列の表示名に ▲(▼) を使用すると、ソートの際に消える。
  • ▲(▼) は 最後にソートした列のみに表示する。
  • 昇順・降順のときの大小の比較は 日, 月, … , 土 が記述されている場合は 日曜を先頭にして考える。文字列は javascript 上 の >, < で比較する。数値の比較には対応していない。
  • table の中には 必ず thead, tbody を記述する。 parent() の数が固定で書かれているため。

order の扱いについては、 order by column_name_1 DESC, column_name_2 ASC のように [[0, -1], [1, 1]] で表すことも考えたが、優先順位と降順・昇順を別にしたほうがわかりやすいのではないかと思って上のようになった。

また、ある列で降順でソートされた後に別の列で昇順でソートした場合、最初にソートした降順は保持されるが、今になって降順・昇順は全列で統一したほうがよいのではないかと思っている。