Tag Archives: 複数

How to Sort Table in Javascript


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

The code is as follows.

The preceding code sorts table rows with sortFunction.sort and shows “▼”/”▲”. sort function receives 3 parameters, order_array, sort_array and clicked th tag (this). 各パラメータについて下に説明を書いた。

order_array

Storing each columns’ order directions, ASC/DESC. If you have 4 columns, it have to be like [1, 1, 1, 1]. 1 means ascending, -1 means descending. If the table is not sorted in initial state, it’s OK to set 1.

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

sort_array

This parameter is array that shows which column is used for sorting. If the table is sorted with first and second column, and sorted with first column primarily, then the parameter have to be [0, 1]. If the table is not sorted, the parameter have to be [].

最後にソートされた列の index は 配列の先頭に追加する。 This is like column order in order by clause of SQL.

this (th)

This enables us to detect which column is clicked.

Issues

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

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

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