表を並び変える

htmlの表を並び替える場合、jQueryのプラグインを使うことが多いかもしれません。

jQuery plugin: Tablesorter 2.0

AngularJSには、orderByというものがあるので、それで頑張ってみます。
頑張ると言っても、一つの項目だったらドキュメント通りで大丈夫です。

AngularJS Documentation for orderBy

そんな感じで、適当に書いていきます。

普通に並び替える

表の上部をクリックすると、並び変わるようにしています。

ソース1

まずは、ng-repeatでデータをhtml上に並べる必要があります。
$scope.membersにそれらのデータを入れて、ループさせます。

ここでは、sortDatareverseDataという$scopeの変数にして入れました。

sortDataにmemberのどのkeyでソートするか(id/name/kana/mail/gender/age)、決めます。
reverseData昇順降順(false/true)を決めます。

上部のアンカーをクリックするとtableSort()が実行されると、sortDataに文字で値が入り、並びが変更されます。
($eventは、jQueryなどのeventのAngularJS版です)

特殊な値は関数を使う

ソース2

表にcharacterというkeyそれぞれの値(弱い/普通/強い)を追加しました。
このままだと、漢字のコード順に並び変わるので、弱い⇔強いとはなりません。

sortDataを関数して、値を数値にして返すと、意図した順番にできます。

複数keyの並び替え

複数のkeyでソートしたい場合があると思います。

ソース3

sortDataを配列にすると、複数のkeyでの並び替えが可能になります。
配列の中身は、文字関数が使えます。

文字では、+か-をつけることで、keyごとに昇順降順を変えることができます。

先に配列に入るkeyが優先されるので、選んだ順番を表示させたり、リセットボタンをつけたり、試行錯誤すると、こんな感じなりました。

sortDataに選んだkeyがあるか確認しているので、冗長になりました。

また、配列で関数を使うと、簡単に昇順降順を変えることができなくて、別々に関数を作ることにしました。

もっと良い方法があるかもしれませんが、まあ、良いでしょう。

まとめ

比較的簡単にソートできました。
(データが少ないので、分かりにくいかもしれませんが…)
ただ、表示する量が増えると重たくなるので、サーバー取得する場合と、検討したほうが良いかもしれません。

JavaScript フレームワーク入門
掌田津耶乃
秀和システム
売り上げランキング: 33,645